Блог

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

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

#webkit #css #semantic-markup

#webkit #css #семантическая разметка

Вопрос:

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

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

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

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

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

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

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

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

 <h1> Heading Level 1 </h1>

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

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

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

Ответ №1:

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

Смотрите: 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. Хотя, вероятно, это не невозможно.

Комментарии:

1. Это избавило меня от необходимости печатать, это то, что я собирался порекомендовать.

2. Спасибо за ответ. Я собираюсь проверить ваш пример в браузере Android. Кстати, посмотрев на это leaverou.me/css3patterns Я подумал, что можно было бы создать текстуру, которую я хочу.

3. Это впечатляющая галерея градиентных шаблонов. Я видел некоторые из ее ранних материалов . Для продумывания и создания этих шаблонов требуется некоторое время, так что это, вероятно, выходит за рамки данного вопроса. Возможно, вы могли бы задать новый вопрос со ссылкой на эту галерею и спросить, возможно ли создать точный шаблон, который вы хотите создать с помощью CSS3 gradients. Наконец, у меня нет опыта работы с браузером Android, но я знаю, что он основан на WebKit, поэтому он также должен работать там.

4. Хорошо, но еще один вопрос, могу ли я вместо использования изображения текстуры в качестве изображения указать URI данных.?

5. Да, это сработает. После того, как вы создали свою текстуру, вы можете использовать для ее создания такой инструмент, как этот .

Ответ №2:

Я бы рекомендовал использовать встроенные элементы. Не используйте span, потому что span — это встроенные элементы, и вам придется заставить их отображать: block, чтобы получить правильное наложение. Я бы предпочел градиент в самом внешнем элементе и вашу прозрачную текстуру внутри него. Семантически у вас, вероятно, должен быть 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).

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