Как мне объединить фоновое изображение и CSS3 градиент на одном элементе?

1251

Как мне использовать CSS3-градиенты для моего, background-colorа затем применить a, background-imageчтобы применить какую-то легкую прозрачную текстуру?

Рональд
источник
9
примечание: вы также можете расположить фоновое изображение (15px по центру) или установить его свойство 'repeat' таким образом (пример работает для Firefox 3.6+) .some-class {background: url ("../ icon.png") no- повторить 15px по центру, -moz-linear-Gradient (центральная вершина, #FFFFFF, #DDDDDD);}
Жюльен Берубе
SVG или SVG + CSS можно использовать для создания плоских текстур (шум) или текстурированных градиентов соответственно.
Клинт Пахл

Ответы:

1544

Несколько фонов!

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;ограничит изображение и градиент до 40px высоты и ширины. Однако использование 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-position, background-repeat и т. Д.

Gidgidonihah
источник
36
Спасибо за ваш ответ, есть какие-нибудь идеи о том, как затем контролировать background-positionтолько изображение, а не градиент?
adardesign
44
спасибо за это, отличная информация. | @adardesign: используйте сокращение фона. Модифицируя приведенный выше пример, это будет: background: url (IMAGE_URL) без повтора слева вверху, [соответствующий-градиент];
РасселУрести
14
@adardesign: background: url ("../ images / icon.png") 15-пиксельный центр без повтора, -moz-linear-Gradient (верхняя часть центра, #FFFFFF, #DDDDDD); / * обратите внимание на 15-пиксельный центр, он добавит отступ в 15 пикселей по левому краю и выравнивание по центру по вертикали icon.png * /
Жюльен Берубе
2
в Chrome, по крайней мере, вы можете управлять положением фона для нескольких изображений с помощью комы для разделения значений .. вот так .. background-position: 0px 8px, 0px 0px ...
Orlando
1
Вероятно, также стоит отметить, что если вам нужно указать другие атрибуты изображения, вы можете использовать свойства background css позже в правиле css. Например: фон-повтор: нет-повтор; background-position: center; размер фона: 1300px 1303px;
Фил Хили
86

Если вы также хотите установить фоновое положение для вашего изображения, вы можете использовать это:

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

или вы также можете создать LESS 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
    }
}
Тамас Пап
источник
Единственный на этой странице, который работал для меня. Я использовал его с обычным CSS, хотя. Все остальные, которые я пробовал, на самом деле скрывали изображение с наложенным цветом градиента.
Ска
@ Ска - Просто измените порядок в обратном порядке. Здесь z-индекс работает наоборот. См. Stackoverflow.com/questions/14915542/… .
Фрэнк Конейн
46

Необходимо понять, что первое определенное фоновое изображение является самым верхним в стеке. Последнее определенное изображение будет самым нижним. Это означает, что для создания градиента фона позади изображения вам потребуется:

  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.

Роберт
источник
2
Ответ будет еще лучше, когда обозначение стандартов W3C придет в конце.
Фолькер Э.
4
Этот код, кажется, не работает должным образом, приятель. мы можем видеть только изображение stackOverflow, а не фоновое изображение позади / перед ним.
или А.
Я думаю, что -webkit-Gradient может быть устаревшим stackoverflow.com/questions/10683364/…
alpalalpal
Код может не работать, но это очень важный момент. Вы можете изменить порядок работы фоновых элементов, но вы должны думать о их наслоении. Если вам нужен градиент сверху изображения, поместите его первым, и вы, вероятно, захотите нам RGBa, чтобы вы могли видеть изображение позади:background-image: linear-gradient(rgba(22,22,22,0), rgba(22,22,22,0.6)), url('image.jpg');
serraosays
34

Вы можете просто напечатать:

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

Неймеддин Джаммели
источник
1
Это было единственное решение, которое работало для меня (Firefox v57). Должно linear-gradient()было быть до url(), и частичная прозрачность должна была использоваться для градиентных цветов, используя rgba(). Все остальное просто использовало первое определение в списке (как будто второе было запасным вариантом, аналогично тому, как font-familyработают объявления).
Валдириус
@waldyrious обратите внимание, что пользователь хочет применить своего рода легкую прозрачную текстуру поверх линейного градиента, поэтому изображение должно быть на первом месте, потому что оно должно быть визуализировано поверх градиента
Алекс Герреро
Композиция изображения и градиента с помощью полупрозрачности должна иметь одинаковый эффект независимо от того, какой из них находится впереди. Однако вы всегда можете определить свои градиенты, чтобы иметь некоторую прозрачность, но изображения, которые еще не являются полупрозрачными, не могут быть легко / динамически преобразованы для использования таким образом. Вот почему я считаю, что подход к градиенту сначала более полезен.
Waldyrious
21

Я всегда использую следующий код, чтобы он работал. Есть несколько заметок:

  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>

  1. Если поместить градиент перед 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>

Этот метод такой же, как у нас есть несколько фоновых изображений, как описано здесь

trungk18
источник
Большой! Я выделю это -> Если вы поместите градиент перед URL-адресом изображения, это изображение будет отображаться под градиентом.
aldyahsn
20

мое решение:

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);
Франческо Борзи
источник
3
В моем случае это решение работает с градиентными изображениями сверху изображения, иначе оно будет скрыто изображением.
vizFlux
15

У меня была реализация, в которой мне нужно было продвинуть эту технику на шаг дальше, и я хотел изложить свою работу. Код ниже делает то же самое, но использует 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 и Bourbon заботятся о кросс-браузерном коде, и теперь все, что я должен объявить, это позиция спрайта на кнопку. Этот принцип легко продлить для кнопок «Активный» и «Наведение».

coreballs
источник
5

Если у вас возникают странные ошибки при загрузке фоновых изображений, используйте средство проверки ссылок 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);
}
Матеуш
источник
4

Вот MIXIN, который я создал для обработки всего, что люди хотели бы использовать:

.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 за нахождение первоначального решения.

lukehillonline
источник
3

Я пытался сделать то же самое. В то время как background-color и background-image существуют на отдельных слоях внутри объекта - то есть они могут сосуществовать - CSS-градиенты, кажется, кооптируют слой background-image.

Насколько я могу судить, у border-image более широкая поддержка, чем у нескольких фонов, так что, возможно, это альтернативный подход.

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

ОБНОВЛЕНИЕ: немного больше исследований. Кажется, у Петры Грегоровой что-то здесь работает -> http://petragregorova.com/demos/css-gradient-and-bg-image-final.html

Alex
источник
2

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

Если вы хотите, чтобы изображения были полностью слиты воедино, когда не похоже, что элементы загружаются отдельно из-за отдельных HTTP-запросов, используйте эту технику. Здесь мы загружаем две вещи на один элемент, которые загружаются одновременно ...

Просто убедитесь, что вы сначала конвертировали предварительно отрендеренное 32-битное прозрачное изображение / текстуру png в строку base64 и используете его в вызове background-image css (вместо INSERTIMAGEBLOBHERE в этом примере).

Я использовал эту технику, чтобы объединить вафельные текстуры и другие данные изображения, которые сериализованы со стандартным правилом прозрачности / линейного градиента CSS. Работает лучше, чем наложение нескольких изображений и тратит впустую 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");
 }
Пол Латур
источник
0

Если вам нужно, чтобы градиенты и фоновые изображения работали вместе в 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/ ) привела меня к этому решению. Это довольно полезно для IE3-специфичного CSS3.

KSev
источник
0

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

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;
}
Чатура Динеш Халватура
источник
0

Я решаю проблему таким образом. Я определяю градиент в 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%
}

vander2000
источник
0

Для моего адаптивного дизайна моя стрелка вниз в выпадающем списке справа от окна (вертикальная гармошка) принимала процент в качестве позиции. Первоначально стрелка вниз была «позиция: абсолютная; вправо: 13px;». С позиционированием 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 Извините, не знаю, как обращаться с фильтрами.

Муге
источник
-1

Как верный способ, вы можете просто сделать фоновое изображение, скажем, 500x5 пикселей, в вашем cssиспользовании:

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

Где xxxxxxсоответствует цвету, который соответствует окончательному цвету градиента.

Вы также можете исправить это в нижней части экрана, чтобы он соответствовал исходному цвету градиента.

Epicus
источник
1
-1 потому что: во-первых, «background-img» не является допустимым правилом CSS. С другой стороны, это на самом деле не отвечает на вопрос.
Крис Браун