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

| 在一个项目中,我需要像这样创建标题,并且我希望使用较少的图像和标记,因为纹理将相同,但渐变在不同部分中有所不同。 标题中有3件事。 标题文字 渐变上的纹理和 在标题文字下 纹理后面的渐变 像这样的组合形式 我只考虑基于Web-Kit的浏览器。我可以使用CSS进行渐变。我可以放置标题文本,并可以在CSS中添加阴影。 我想在不使用任何图像或更少图像的情况下制作此东西。所以问题是,是否有可能在CSS中制作纹理,如果不可能,那么使用一个透明纹理图像实现此标题的最佳语义方法是什么? 我想用这段代码
<h1> Heading Level 1 </h1>
所以我可以使用CSS来使用2个背景1)css制成的渐变,2)在渐变的顶部,我想用
repeat-x
放置透明的纹理图像 如果我们不能将背景分层放置,那么您会建议其他什么方法? 我是否必须额外使用
span
和ѭ3use     
已邀请:
如果您只关心最新的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制作纹理将非常困难。虽然可能并非没有可能。     
我建议使用嵌入式元素。不要使用跨度,因为跨度是内联元素,您必须将其设置为display: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\'); }
上面的代码将为您提供从灰色到白色的渐变(从上到下),只需使用colorscheme更改颜色即可。它适用于大多数浏览器(不是ie7,但是是ie8)。 如果您需要建议,我们很乐意为您提供进一步的帮助。     

要回复问题请先登录注册