如何使用两个背景为一个元素和第二个背景放在第一？ [英] How to use two backgrounds for one element and put second background on top of first?

问题描述

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

在标题文本下

纹理背后的渐变

组合形式

p>

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

我想做这个东西，而不使用任何图像或更少的图像。所以问题是，是否可以在css中做纹理，如果不可能，那么什么是最好的语义方法，以一个透明的纹理图像来标记这个标题？

 < h1>标题级别1< / h1> 
 

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

来放置纹理的透明图像如果我们不能将背景

我需要使用额外的 span 和 z-index

解决方案

如果你只关心最近的WebKit浏览器， CSS3的多个背景：

查看： http://jsfiddle.net/thirtydot/xCnZs/

HTML：

 < h1> ;标题级别1< / h1> 
  

CSS：

  h1 {
 font：42px / 1 Georgia，serif; 
 color：#fff; 
 margin：0; 
 padding：12px; 
 
 background：url（http://i.stack.imgur.com/rgOES.png）左上方重复，-webkit-gradient（linear，left top，left bottom，color-stop ％，＃6db3f2），停止（50％，＃54a3ee），停止（51％，＃3690f0），停止（100％，＃1e69de） 
 
 text-shadow：2px 2px 3px＃000; 
} 
  

---

制作此图片：

这是一个透明的 .png ，只是一个随机的纹理。它不平铺得很好，但我没有试图使它这样做;它只是为了显示这个概念。

这将是非常困难的纹理与纯CSS。虽然可能不是不可能。

In a project I need to make headings like this and I want to use with less image and markup because Texture will be the same but Gradient are different in different sections.

I have 3 things in heading.

1. Heading text
2. A texture over the gradient and under the heading text
3. A gradient behind the texture

like this in a combined form

I'm only considering Web-Kit based browsers. I can make gradient with CSS. I can put heading text and can add shadow in css.

I want to make this thing without using any image or less image. So question is, Is it possible to make texture in css and If it's not possible then what is the best Semantic way to achive this heading with one transparent texture image?

I want to make this with this code

<h1> Heading Level 1 </h1>

So using CSS can i use 2 backgrounds 1) gradient made by css and 2) on the top of the gradient I want to put transparent image of texture with repeat-x

And If we can't put background in layers then what other way you would suggest?

Will I have to use with extra span and z-index

解决方案

If you only care about recent WebKit browsers, you can use CSS3's multiple backgrounds:

See: 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;
}

---

I used Photoshop to quickly make this image:

It's a transparent .png with just a random texture on it. It doesn't tile very well, but I didn't try to make it do so; it was just to show the concept.

It would be very difficult to make the texture with pure CSS. Though probably not impossible.

这篇关于如何使用两个背景为一个元素和第二个背景放在第一？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！