Как применить градиент к фону с помощью CSS?

Я начинаю работать с CSS3 и делаю все возможное, чтобы преобразовать композицию Photoshop в HTML.

У меня есть несколько экземпляров фона (с использованием URL-адреса фона) с разной высотой, и я хотел бы применить градиент поверх этого фона, используя градиенты rgba (с использованием альфа-канала). Я, очевидно, хотел бы держаться подальше от статического фонового изображения с градиентом, встроенным в пиксели.

Есть ли способ сделать это в CSS, «наложив» градиент поверх URL-адреса фона?

Я предполагаю, что если я не могу сделать это в одном элементе, я бы поместил контейнер внутри моего фонового элемента, плавал и заставлял ширину и высоту заполнять фоновый элемент, но это выглядит довольно грязно.

Любой совет приветствуется! Спасибо за ваше время!

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

Навигация с фоном и небольшим градиентомвведите здесь описание изображения

Код будет выглядеть примерно так:

<nav>
 <ul>
  <li>Menu item 1</li>
  <li>Menu item 2</li>
  <li>Menu item 3</li>
  <li>Menu item 4</li>
 </ul>
</nav>

стиль:

nav {
  background : url('repeating-background-image.png') repeat;
  background: -moz-linear-gradient(top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.65)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /*    Chrome10+,Safari5.1+ */
}

html gradient css linear-gradients
person Barrett Kuethen    schedule 24.07.2013    source источник

Ответы (3)


arrow_upward
2
arrow_downward

Есть ли способ сделать это в CSS, «наложив» градиент поверх URL-адреса фона?

Да: CSS3 позволяет использовать несколько фоновых изображений, разделенных запятыми.

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

div {
    width: 400px;
    height: 400px;
    background: -moz-linear-gradient(top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%), url(http://www.pauldwaite.me.uk/images/professional.jpg); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.65)), color-stop(100%,rgba(0,0,0,0))), url(http://www.pauldwaite.me.uk/images/professional.jpg); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%), url(http://www.pauldwaite.me.uk/images/professional.jpg); /*    Chrome10+,Safari5.1+ */
}

Это не работает в IE 8 и более ранних версиях, но и градиенты CSS тоже не работают. (Хотя свойство Microsoft filter работает в IE 8 и более ранних версиях и поддерживает градиенты с альфа-прозрачностью — см. Можете ли вы использовать цвета rgba в созданных градиентах со свойством фильтра Internet Explorer?).

person Paul D. Waite    schedule 24.07.2013

arrow_upward
0
arrow_downward

http://jsfiddle.net/8gvZM/

background: #ffffff; /* old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(47%,#f6f6f6), color-stop(100%,#ededed)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* IE10+ */
background: linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 ); /* IE6-9 */

и сделайте div над ним с фоновым URL-адресом с более низкой непрозрачностью.

Это то, что вы имели ввиду?

person Oussama el Bachiri    schedule 24.07.2013
comment
Это было бы так, если бы на нем также был фоновый URL. Я думал, что градиент будет иметь более низкую непрозрачность и находиться поверх URL-адреса bg. Я не уверен, что вы можете уменьшить непрозрачность URL-адреса bg. - person Barrett Kuethen; 24.07.2013
comment
Уменьшить непрозрачность самого div? - person Oussama el Bachiri; 24.07.2013

arrow_upward
0
arrow_downward

Используйте CSS :before для создания дополнительного (псевдо) элемента поверх исходного элемента.

Исходный элемент будет иметь фоновое изображение, а элемент :after будет иметь градиент с настройкой непрозрачности, чтобы исходный элемент был виден сквозь него.

div {
    width: (whatever size you want to set it to)
    height: (ditto)
    position:relative;
    background:url('mainImage.jpg');
    z-index:5;
}

div::before {
    content:'';
    width: .... (same as main div)
    height: .... (same as main div)
    position:absolute;
    z-index:-3;
    display:block;
    opacity:0.5;
    background: linear-gradient(to bottom, #8fc400 0%,#ff0000 100%); /* plus add the other browser-specific gradient styles too */
}

Я сделал jsFiddle для демонстрации: см. здесь

Надеюсь, это поможет.

[EDIT] Немного изменил детали ответа выше в ответ на комментарий OP. Теперь используйте :before, а не :after, и используйте z-index для наложения вещей, чтобы фактическое текстовое содержимое было видно поверх обоих фонов.

person Spudley    schedule 24.07.2013
comment
Мне это нравится, но как вы отображаете свой контент, если разделитель ::after становится непрозрачным? - person Milche Patern; 24.07.2013
comment
Обновленная версия скрипки с использованием z-index, показывающая, что текст правильно отображается поверх обоих фонов -- jsfiddle.net/x3Uxe/ 2 - person Spudley; 24.07.2013