Як поєднати фонове зображення та градієнт CSS3 на одному елементі?

Як я можу використовувати градієнти CSS3 для мого, background-colorа потім застосувати a, background-imageщоб застосувати якусь легку прозору текстуру?

Кілька фонів!

body {
  background: #eb01a5;
  background-image: url("IMAGE_URL"); /* fallback */
  background-image: url("IMAGE_URL"), linear-gradient(#eb01a5, #d13531); /* W3C */
}

Ці 2 рядки є запасним для будь-якого браузера, який не робить градієнтів. Дивіться примітки для укладання зображень лише IE <9 нижче.

• Рядок 1 задає рівний колір фону.
• Рядок 2 встановлює резервне фонове зображення.

Заключний рядок задає фонове зображення та градієнт для браузерів, які можуть ними обробляти.

• Рядок 3 призначений для всіх відносно сучасних браузерів.

Майже всі поточні веб-переглядачі мають підтримку декількох фонових зображень та css фонів. Див. Http://caniuse.com/#feat=css-gradients для підтримки браузера. Щоб дізнатись про те, чому вам не потрібні кілька префіксів веб-переглядача, див. Http://codepen.io/thebabydino/full/pjxVWp/

Шар шару

Слід зазначити, що перше визначене зображення буде найвищим у стеку. У цьому випадку зображення знаходиться в ТОПі градієнта.

Для отримання додаткової інформації про фонове шарування див. Http://www.w3.org/TR/css3-background/#layering .

Укладання зображень ТИЛЬКО (без градієнтів у декларації) Для IE <9

IE9 і вище можуть укладати зображення таким же чином. Ви можете використовувати це для створення градієнтного зображення для ie9, хоча особисто я цього не зробив. Однак слід зазначити при використанні лише зображень, тобто <9 буде ігнорувати резервний випадок і не показувати жодне зображення. Це не відбувається, коли включений градієнт. Для використання єдиного резервного зображення в цьому випадку я пропоную використовувати чудовий умовний HTML-елемент Пола Ірландського разом із вашим резервним кодом:

.lte9 #target{ background-image: url("IMAGE_URL"); }

Фонове положення, розмір тощо

Інші властивості, які застосовуватимуться до одного зображення, також можуть бути розділені комами. Якщо введено лише 1 значення, воно буде застосовано до всіх складених зображень, включаючи градієнт. background-size: 40px;буде обмежувати зображення і градієнт до висоти та ширини 40 пікселів. Однак використання background-size: 40px, cover;зробить зображення 40px, а градієнт покриє елемент. Щоб застосувати налаштування лише до одного зображення, встановіть за замовчуванням інше: background-position: 50%, 0 0;або для браузерів, які підтримують його використання initial:background-position: 50%, initial;

Ви також можете використовувати фонову стенограму, однак це видаляє резервний колір та зображення.

body{
    background: url("IMAGE_URL") no-repeat left top, linear-gradient(#eb01a5, #d13531);
}

Те саме стосується фонового положення, повторення фону тощо.

Якщо ви також хочете встановити фонове положення для свого зображення, ви можете скористатися цим:

background-color: #444; // fallback
background: url('PATH-TO-IMG') center center no-repeat; // fallback

background: url('PATH-TO-IMG') center center no-repeat, -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+
background: url('PATH-TO-IMG') center center no-repeat, -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+
background: url('PATH-TO-IMG') center center no-repeat, -webkit-linear-gradient(top, @startColor, @endColor); // Safari 5.1+, Chrome 10+
background: url('PATH-TO-IMG') center center no-repeat, -o-linear-gradient(top, @startColor, @endColor); // Opera 11.10
background: url('PATH-TO-IMG') center center no-repeat, linear-gradient(to bottom, @startColor, @endColor); // Standard, IE10

або ви також можете створити МЕНШЕ mixin (стиль завантаження):

#gradient {
    .vertical-with-image(@startColor: #555, @endColor: #333, @image) {
        background-color: mix(@startColor, @endColor, 60%); // fallback
        background-image: @image; // fallback

        background: @image, -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+
        background: @image, -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+
        background: @image, -webkit-linear-gradient(top, @startColor, @endColor); // Safari 5.1+, Chrome 10+
        background: @image, -o-linear-gradient(top, @startColor, @endColor); // Opera 11.10
        background: @image, linear-gradient(to bottom, @startColor, @endColor); // Standard, IE10
    }
}

Слід усвідомити, що перше визначене фонове зображення є найвищим у стеку. Останнє визначене зображення буде найнижчим. Це означає, щоб мати фоновий градієнт позаду зображення, вам знадобиться:

  body {
    background-image: url("http://www.skrenta.com/images/stackoverflow.jpg"), linear-gradient(red, yellow);
    background-image: url("http://www.skrenta.com/images/stackoverflow.jpg"), -webkit-gradient(linear, left top, left bottom, from(red), to(yellow));
    background-image: url("http://www.skrenta.com/images/stackoverflow.jpg"), -moz-linear-gradient(top, red, yellow);
  }

Ви також можете визначити позиції фону та розмір фону для зображень. Я зібрав публікацію в блозі про деякі цікаві речі, які ви можете зробити з градієнтами CSS3

ви можете просто ввести:

background: linear-gradient(
    to bottom,
    rgba(0,0,0, 0),
    rgba(0,0,0, 100)
  ),url(../images/image.jpg);

Я завжди використовую наступний код, щоб він працював. Є кілька приміток:

1. Якщо розмістити URL-адресу зображення перед градієнтом, це зображення відображатиметься над градієнтом, як очікувалося.

.background-gradient {
  background: url('http://trungk18.github.io/img/trungk18.png') no-repeat, -moz-linear-gradient(135deg, #6ec575 0, #3b8686 100%);
  background: url('http://trungk18.github.io/img/trungk18.png') no-repeat, -webkit-gradient(135deg, #6ec575 0, #3b8686 100%);
  background: url('http://trungk18.github.io/img/trungk18.png') no-repeat, -webkit-linear-gradient(135deg, #6ec575 0, #3b8686 100%);
  background: url('http://trungk18.github.io/img/trungk18.png') no-repeat, -o-linear-gradient(135deg, #6ec575 0, #3b8686 100%);
  background: url('http://trungk18.github.io/img/trungk18.png') no-repeat, -ms-linear-gradient(135deg, #6ec575 0, #3b8686 100%);
  background: url('http://trungk18.github.io/img/trungk18.png') no-repeat, linear-gradient(135deg, #6ec575 0, #3b8686 100%);
  height: 500px;
  width: 500px;
}

<div class="background-gradient"></div>

2. Якщо розмістити градієнт перед URL-адресою зображення, це зображення відображатиметься під градієнтом.

.background-gradient {
  background: -moz-linear-gradient(135deg, #6ec575 0, #3b8686 100%), url('http://trungk18.github.io/img/trungk18.png') no-repeat;
  background: -webkit-gradient(135deg, #6ec575 0, #3b8686 100%), url('http://trungk18.github.io/img/trungk18.png') no-repeat;
  background: -webkit-linear-gradient(135deg, #6ec575 0, #3b8686 100%), url('http://trungk18.github.io/img/trungk18.png') no-repeat;
  background: -o-linear-gradient(135deg, #6ec575 0, #3b8686 100%), url('http://trungk18.github.io/img/trungk18.png') no-repeat;
  background: -ms-linear-gradient(135deg, #6ec575 0, #3b8686 100%), url('http://trungk18.github.io/img/trungk18.png') no-repeat;
  background: linear-gradient(135deg, #6ec575 0, #3b8686 100%), url('http://trungk18.github.io/img/trungk18.png') no-repeat;
  width: 500px;
  height: 500px;
}

<div class="background-gradient"></div>

Ця методика точно така ж, як у нас є кілька фонових зображень, як описано тут

моє рішення:

background-image: url(IMAGE_URL); /* fallback */

background-image: linear-gradient(to bottom, rgba(0,0,0,0.7) 0%,rgba(0,0,0,0.7) 100%), url(IMAGE_URL);

У мене була реалізація, де мені потрібно було зробити цю техніку на крок далі, і хотів окреслити свою роботу. Наведений нижче код робить те саме, але використовує SASS, Bourbon та спрайт зображень.

    @mixin sprite($position){
        @include background(url('image.png') no-repeat ($position), linear-gradient(#color1, #color2));
    }
    a.button-1{
        @include sprite(0 0);
    }
    a.button-2{
       @include sprite (0 -20px);  
    }
    a.button-2{
       @include sprite (0 -40px);  
    }

SASS і Бурбон піклуються про перехресний код браузера, і тепер все, що мені потрібно декларувати, - це положення спрайту на кнопку. Цю головну функцію можна легко розширити на активні та перемикачі.

Якщо у вас є дивні помилки при завантаженні фонових зображень, використовуйте перевірку посилань W3C: https://validator.w3.org/checklink

Ось сучасні міксини, які я використовую (кредити: PSA: не використовувати градієнтні генератори ):

.buttonAkc
{
    .gradientBackground(@imageName: 'accept.png');
    background-repeat: no-repeat !important;
    background-position: center right, top left !important;
}

.buttonAkc:hover
{
    .gradientBackgroundHover('accept.png');
}

.gradientBackground(@startColor: #fdfdfd, @endColor: #d9d9db, @imageName)
{
    background-color: mix(@startColor, @endColor, 60%); // fallback
    background-image: url("@{img-folder}/@{imageName}?v=@{version}"); // fallback
    background: url("@{img-folder}/@{imageName}?v=@{version}") no-repeat scroll right center, -webkit-linear-gradient(top, @startColor 0%, @endColor 100%) no-repeat scroll left top; // Chrome 10-25, Safari 5.1-6
    background: url("@{img-folder}/@{imageName}?v=@{version}") no-repeat scroll right center, linear-gradient(to bottom, @startColor 0%, @endColor 100%) no-repeat scroll left top;
}

.gradientBackgroundHover(@imageName)
{
    .gradientBackground(#fdfdfd, #b5b6b9, @imageName);
}

Ось МІКСІН, який я створив, щоб обробляти все, що люди можуть хотіти використовувати:

.background-gradient-and-image (@fallback, @imgUrl, @background-position-x, @background-position-y, @startColor, @endColor) {
    background: @fallback;
    background: url(@imgUrl) @background-position-x @background-position-y no-repeat; /* fallback */
    background: url(@imgUrl) @background-position-x @background-position-y no-repeat, -webkit-gradient(linear, left top, left bottom, from(@startColor) @background-position-x @background-position-y no-repeat, to(@endColor)); /* Saf4+, Chrome */
    background: url(@imgUrl) @background-position-x @background-position-y no-repeat, -webkit-linear-gradient(top, @startColor, @endColor); /* Chrome 10+, Saf5.1+ */
    background: url(@imgUrl) @background-position-x @background-position-y no-repeat,    -moz-linear-gradient(top, @startColor, @endColor); /* FF3.6+ */
    background: url(@imgUrl) @background-position-x @background-position-y no-repeat,     -ms-linear-gradient(top, @startColor, @endColor); /* IE10 */
    background: url(@imgUrl) @background-position-x @background-position-y no-repeat,      -o-linear-gradient(top, @startColor, @endColor); /* Opera 11.10+ */
    background: url(@imgUrl) @background-position-x @background-position-y no-repeat,         linear-gradient(top, @startColor, @endColor); /* W3C */
}

Це можна використовувати так:

.background-gradient-and-image (#f3f3f3, "../images/backgrounds/community-background.jpg", left, top, #fafcfd, #f2f2f2);

Сподіваюся, хлопці вважають це корисним.

заслуга @Gidgidonihah за пошук початкового рішення.

Я намагався зробити те саме. У той час як кольори фону та зображення в фоновому режимі існують на окремих шарах об'єкта - це означає, що вони можуть співіснувати - градієнти CSS, схоже, кооптують шар фонового зображення.

З того, що я можу сказати, зображення на кордоні, здається, має ширшу підтримку, ніж численні фони, тому, можливо, це альтернативний підхід.

http://articles.sitepoint.com/article/css3-border-images

ОНОВЛЕННЯ: Трохи більше дослідження. Здається, у Петри Грегорової тут щось працює -> http://petragregorova.com/demos/css-gradient-and-bg-image-final.html

Ви можете використовувати кілька фон: лінійний градієнт (); дзвінки, але спробуйте це:

Якщо ви хочете, щоб зображення були повністю злиті разом там, де вони не виглядають як елементи завантажуються окремо через окремі запити HTTP, то використовуйте цю техніку. Тут ми завантажуємо дві речі на один і той же елемент, який завантажується одночасно ...

Просто переконайтеся, що ви конвертуєте попередньо відредаговане 32-бітове прозоре зображення PNG / тексту в рядок base64 та використовуєте його в рамках виклику css фонового зображення (замість INSERTIMAGEBLOBHERE у цьому прикладі).

Я використовував цю техніку, щоб сплавити текстуру вигляду вафельних виробів та інші дані зображення, серіалізовані за допомогою стандартного правила css прозорості / лінійного градієнта rgba. Працює краще, ніж розшарування декількох мистецтв та витрачання HTTP-запитів, що погано для мобільних пристроїв. Все завантажується на стороні клієнта, не вимагаючи роботи з файлом, але збільшує розмір байта документа.

 div.imgDiv   {
      background: linear-gradient(to right bottom, white, rgba(255,255,255,0.95), rgba(255,255,255,0.95), rgba(255,255,255,0.9), rgba(255,255,255,0.9), rgba(255,255,255,0.85), rgba(255,255,255,0.8) );
      background-image: url("data:image/png;base64,INSERTIMAGEBLOBHERE");
 }

Якщо вам потрібно отримати градієнти та фонові зображення, які працюють разом у IE 9 (HTML 5 та HTML 4.01 Strict), додайте до класу css таке декларацію атрибутів, і це повинно зробити трюк:

filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#000000', endColorstr='#ff00ff'), progid:DXImageTransform.Microsoft.AlphaImageLoader(src='[IMAGE_URL]', sizingMethod='crop');

Зауважте, що ви використовуєте filterатрибут і що є два екземпляри, progid:[val]розділені комою, перш ніж закрити значення атрибута крапкою з комою. Ось загадка . Також зауважте, що при погляді на скрипку градієнт виходить за межі закруглених кутів. Я не маю виправлення для цього іншого, не використовуючи закруглені кути. Також зауважте, що при використанні відносного шляху в атрибуті src [IMAGE_URL] шлях відносно сторінки документа, а не файлу css (див. Джерело ).

Ця стаття ( http://coding.smashingmagazine.com/2010/04/28/css3-solutions-for-internet-explorer/ ) - це те, що привело мене до цього рішення. Це досить корисно для IE-специфічного CSS3.

Я хотів зробити кнопку прольоту з фоновим зображенням, комбінацією градієнта фону.

http://enjoycss.com/ допоміг виконати моє робоче завдання. Тільки мені доведеться видалити додатковий CSS, створений автоматично. Але це дуже приємно, щоб сайт створив вашу подряпину.

#nav a.link-style span {
    background: url("../images/order-now-mobile.png"), -webkit-linear-gradient(0deg, rgba(190,20,27,1) 0, rgba(224,97,102,1) 51%, rgba(226,0,0,1) 100%);
    background: url("../images/order-now-mobile.png"), -moz-linear-gradient(90deg, rgba(190,20,27,1) 0, rgba(224,97,102,1) 51%, rgba(226,0,0,1) 100%);
    background: url("../images/order-now-mobile.png"), linear-gradient(90deg, rgba(170,31,0,1) 0, rgba(214,18,26,1) 51%, rgba(170,31,0,1) 100%);
    background-repeat: no-repeat;
    background-position: 50% 50%;
    border-radius: 8px;
    border: 3px solid #b30a11;
}

Я вирішую проблему таким чином. Я визначаю градієнт в HTML і фонове зображення в тілі

html {
  background-image: -webkit-gradient(linear, left bottom, right top, color-stop(0.31, rgb(227, 227, 227)), color-stop(0.66, rgb(199, 199, 199)), color-stop(0.83, rgb(184, 184, 184)));
  background-image: -moz-linear-gradient(left bottom, rgb(227, 227, 227) 31%, rgb(199, 199, 199) 66%, rgb(184, 184, 184) 83%);
  height: 100%
}
body {
  background: url("http://www.skrenta.com/images/stackoverflow.jpg");
  height: 100%
}

Для мого чуйного дизайну моя стрілка вниз у правій частині коробки (вертикальний акордеон) сприйняла відсоток як позицію. Спочатку стрілка вниз була "позиція: абсолютна; права: 13 пікселів;". При 97% позиціонуванні це виглядало як шарм наступним чином:

> background: #ffffff;
> background-image: url(PATH-TO-arrow_down.png); /*fall back - IE */
> background-position: 97% center; /*fall back - IE */
> background-repeat: no-repeat; /*fall back - IE */
> background-image: url(PATH-TO-arrow_down.png)  no-repeat  97%  center;  
> background: url(PATH-TO-arrow_down.png) no-repeat 97% center,  -moz-linear-gradient(top, #ffffff 1%, #eaeaea 100%); 
> background: url(PATH-TO-arrow_down.png) no-repeat 97% center,  -webkit-gradient(linear, left top, left bottom, color-stop(1%,#ffffff), color-stop(100%,#eaeaea)); 
> background: url(PATH-TO-arrow_down.png) no-repeat 97% center,  -webkit-linear-gradient(top, #ffffff 1%,#eaeaea 100%); 
> background: url(PATH-TO-arrow_down.png) no-repeat 97% center,  -o-linear-gradient(top, #ffffff 1%,#eaeaea 100%);<br />
> filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eaeaea',GradientType=0 ); 

PS Вибачте, не знаю, як обробляти фільтри.

Як вірний спосіб, ви можете просто створити фонове зображення, яке, наприклад, 500x5 пікселів, у вашому cssвикористанні:

background-img:url(bg.jpg) fixed repeat-x;
background:#<xxxxxx>;

Де xxxxxxвідповідає кольору, який відповідає кінцевому кольору градієнта.

Ви також можете виправити це внизу екрана і відповідати початковому кольору градієнта.