CSS：结合纹理和色彩

Question

别人如何使用纹理结合作为背景图片和背景颜色纹理之上？

这里的质地：

我想我的身体背景页是这样：

我与backroung形象和挣扎背景色：http://jsfiddle.net/87K72/

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

Answer 1

您可以使用覆盖DIV与alpha通道你的身体顶部，但在你的其他元素下。

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

Answer 2

它看起来像你的texture here缺少一个alpha通道。它不是半透明的，它真的是白色的。

Answer 3

你需要使用一个半透明的背景纹理是什么;那么你的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/

Answer 4

你可以利用CSS不透明的做到这一点。

创建两个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

Answer 5

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