如何为一个元素使用两个背景并将第二个背景放在第一个元素之上？

Question

在一个项目中，我需要制作这样的标题，我想使用较少的图像和标记，因为纹理将是相同的但不同部分的渐变是不同的。

标题中有3件事。

1. 标题文字
2. 渐变上的纹理和 标题文本
下
3. 纹理背后的渐变

像这样以组合形式



我只考虑基于Web-Kit的浏览器。我可以用CSS制作渐变。我可以添加标题文本，并可以在css中添加阴影。

我想在不使用任何图像或更少图像的情况下制作此内容。所以问题是，是否有可能在css中制作纹理，如果不可能，那么使用一个透明纹理图像获得此标题的最佳语义方法是什么？

我想用这段代码来实现这个目标

<h1> Heading Level 1 </h1>

所以使用CSS我可以使用2个背景1）由css和2）在渐变顶部制作的渐变我想用repeat-x

放置纹理的透明图像

如果我们不能将背景放在图层中，那么您会建议采用其他方式吗？

我是否必须使用额外的span和z-index

Answer 1

如果您只关心最近的WebKit浏览器，可以使用CSS3的multiple backgrounds：

请参阅：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制作纹理非常困难。虽然可能并非不可能。

Answer 2

我建议使用嵌入式元素。不要使用跨度，因为跨距是内联元素，您必须使它们显示：阻止以获得正确的叠加。我只是在最外层元素的渐变和它内部的透明纹理。在语义上你可能应该在外面有一个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'); }

上面的代码会给你一个灰色到白色的渐变（从上到下），只需用你的colorscheme改变颜色。它适用于大多数浏览器（不是ie7但是ie8）。

如果您需要建议我会很乐意提供帮助。