CSS:结合纹理和颜色

时间:2013-08-07 14:16:45

标签: html css css3

有人如何将纹理用作背景图像和背景颜色组合在纹理上面?

纹理:

Texture alone

我希望我的身体背景页面如下:

enter image description here

我正在努力使用backroung-image和background-color:http://jsfiddle.net/87K72/

body{
  background: #6DB3F2 url('http://s13.postimg.org/j0qiscsw3/cream.png');
 }

5 个答案:

答案 0 :(得分:7)

您可以在身体顶部使用带有Alpha通道的叠加div,但在其他元素下使用。

<强> jsFiddle example

<h1>I want blue color above my texture</h1>
<div id="cover"></div>
body {
    background: url('http://i.stack.imgur.com/oslRB.png');
}
h1{
    position:relative;
    z-index:2;
}
#cover {
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background-color:rgba(109,179,242,0.5);
    z-index:1;
}

答案 1 :(得分:1)

您的texture here似乎缺少Alpha通道。它不是半透明的,它真的很白。

答案 2 :(得分:1)

你需要使用半透明背景纹理;那么你的CSS指令就可以解决问题了:

HTML:

<h1>I want blue color above my texture</h1>

CSS:

body {
    background: #6DB3F2  url('http://wizzley.com/static/img/bg/texture8.png');
}

实施例: http://jsfiddle.net/87K72/3/

答案 3 :(得分:1)

您可以使用css opacity来执行此操作。

创建两个div - 一个用于颜色,一个用于纹理:

HTML:

<div class="texture-color">
    <div class="texture">
        <h1> I want blue color above my texture</h1>
    </div>
</div>

CSS:

.texture,.texture-color {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0; } 

.texture { 
    background: #6DB3F2 url('http://s13.postimg.org/j0qiscsw3/cream.png'); 
    opacity: 0.8; }

.texture-color { 
    background-color: cyan;  }

jsFiddle

答案 4 :(得分:1)

http://jsfiddle.net/uyrPA/3/

body {
    width:auto;
    height:auto;
    background: green;
}


body:after{
    content : "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    background: url(http://i.stack.imgur.com/oslRB.png) repeat;
    width: 100%;
    height:  100%;
    opacity : 0.5;
}

h1{
    position:relative;
    z-index:2;
}