有人如何将纹理用作背景图像和背景颜色组合在纹理上面?
纹理:
我希望我的身体背景页面如下:
我正在努力使用backroung-image和background-color:http://jsfiddle.net/87K72/
body{
background: #6DB3F2 url('http://s13.postimg.org/j0qiscsw3/cream.png');
}
答案 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');
}
答案 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; }
答案 4 :(得分:1)
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;
}