Как использовать два фона для одного элемента и поместить второй фон поверх первого?

В проекте мне нужно сделать такие заголовки, и я хочу использовать с меньшим количеством изображений и разметки, потому что Текстура будет одинаковой, но Градиент в разных разделах будет разным.

У меня есть 3 вещи в заголовке.

  1. Текст заголовка
  2. Текстура над градиентом и под текстом заголовка
  3. Градиент за текстурой

вот так в комбинированном виде

введите здесь описание изображения

Я рассматриваю только браузеры на базе Web-Kit. Я могу сделать градиент с помощью CSS. Я могу поместить текст заголовка и добавить тень в css.

Я хочу сделать это без использования какого-либо изображения или меньшего количества изображений. Итак, вопрос в том, можно ли создать текстуру в css, и если это невозможно, то каков наилучший семантический способ добиться этого заголовка с помощью одного прозрачного изображения текстуры?

Я хочу сделать это с помощью этого кода

<h1> Heading Level 1 </h1>

Итак, используя CSS, я могу использовать 2 фона: 1) градиент, созданный css, и 2) поверх градиента я хочу поместить прозрачное изображение текстуры с помощью repeat-x

И если мы не можем поместить фон в слои, то какой другой способ вы могли бы предложить?

Придется ли мне использовать дополнительные span и z-index


css webkit semantic-markup
person Jitendra Vyas    schedule 20.04.2011    source источник

Ответы (2)


arrow_upward
3
arrow_downward

Если вас интересуют только последние браузеры WebKit, вы можете использовать несколько фонов:

См.: http://jsfiddle.net/thirtydot/xCnZs/.

HTML:

<h1>Heading Level 1</h1>

CSS:

h1 {
    font: 42px/1 Georgia, serif; 
    color: #fff;
    margin: 0;
    padding: 12px;

    background: url(http://i.stack.imgur.com/rgOES.png) top left repeat, -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6db3f2), color-stop(50%,#54a3ee), color-stop(51%,#3690f0), color-stop(100%,#1e69de));

    text-shadow: 2px 2px 3px #000;
}

Я использовал Photoshop, чтобы быстро сделать это изображение:

Это прозрачный .png со случайной текстурой. Это не очень хорошо мозаично, но я не пытался это сделать; это было просто, чтобы показать концепцию.

Было бы очень сложно сделать текстуру с помощью чистого CSS. Хотя, наверное, не невозможно.

person thirtydot    schedule 20.04.2011
comment
Спас меня от набора текста, это то, что я собирался порекомендовать. - person Brent Friar; 20.04.2011
comment
Спасибо за ответ. Я собираюсь проверить ваш пример в браузере Android. Кстати, после просмотра этого leaverou.me/css3patterns я подумал, что можно сделать текстуру, которую я хочу. - person Jitendra Vyas; 20.04.2011
comment
Это впечатляющая галерея градиентных узоров. Я видел некоторые из ее более ранних работ. Эти шаблоны требуют времени, чтобы обдумать и сделать, так что это, вероятно, выходит за рамки этого вопроса. Возможно, вы могли бы создать новый вопрос со ссылкой на эту галерею и спросить, возможно ли создать точный шаблон, который вы хотите создать с помощью градиентов CSS3. Наконец, у меня нет опыта работы с браузером Android, но я знаю, что он основан на WebKit, поэтому он также должен работать там. - person thirtydot; 20.04.2011
comment
ОК, но еще один вопрос, вместо использования изображения текстуры в качестве изображения, могу ли я указать URI данных? - person Jitendra Vyas; 20.04.2011
comment
Да, это сработает. Создав текстуру, вы можете использовать для ее создания подобный инструмент. - person thirtydot; 20.04.2011

arrow_upward
0
arrow_downward

Я бы рекомендовал использовать встроенные элементы. Не используйте диапазон, потому что диапазоны являются встроенными элементами, и вам придется заставить их отображать: блокировать, чтобы получить правильное наложение. Я бы добавил градиент в самом внешнем элементе и вашу прозрачную текстуру внутри него. Семантически у вас, вероятно, должен быть div снаружи, а h1 внутри него, вот так.

<div class="gradient">
    <h1 class="texture">Heading Level 1</h1>
</div>

Хорошие новости! Вам не нужно беспокоиться о том, чтобы использовать webkit только для градиентов.

    .gradient { background: -webkit-gradient(linear, left top, left bottom, from(#cfcdd2), to(#fff)); 
    background: -moz-linear-gradient(top,  #cfcdd2,  #fff); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cfcdd2', endColorstr='#000000'); }
    .texture { background: url('myimage.png'); }

Приведенный выше код даст вам градиент от серого к белому (сверху вниз), просто измените цвета с помощью вашей цветовой схемы. Он работает в большинстве браузеров (не ie7, а ie8).

Я буду рад помочь дальше, если вам нужен совет.

person jackreichert    schedule 20.04.2011