Я начинаю работать с 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+ */
}