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

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

1 голос
/ 20 апреля 2011

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

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

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

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

enter image description here

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

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

Я хочу сделать это с этим кодом 

<h1> Heading Level 1 </h1>

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

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

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

Ответы [ 2 ]

3 голосов
/ 20 апреля 2011

Если вы заботитесь только о последних браузерах 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.Хотя, вероятно, не невозможно.

0 голосов
/ 20 апреля 2011

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

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

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

    .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, а yes ie8).

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

...