Html CSS：结合纹理和颜色

有人如何结合纹理使用作为背景图像和背景颜色以上的纹理

这里是纹理：

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

我正在努力处理背景图像和背景色：

---

看起来你的大脑缺少阿尔法通道。它不是半透明的，它实际上是白色的。

你需要使用半透明的背景纹理；然后，您的CSS指令将执行以下操作：

HTML:

例如：

---

您可以使用叠加div，在身体顶部但在其他元素下使用alpha通道

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

我想要我的纹理上面有蓝色
身体{
背景：url（'http://i.stack.imgur.com/oslRB.png');
}
h1{
位置：相对位置；
z指数：2；
}
#掩护{
位置：绝对位置；
排名：0；
底部：0；
左：0；
右：0；
背景色：rgba（109179242,0.5）；
z指数：1；
}

您可以使用css不透明度来实现这一点

创建两个div-一个用于颜色，一个用于纹理：

HTML:

---

将背景图像应用于你的

html

标记，将背景颜色应用于你的

body

标记，并确保它占据整个页面。哇，我不知道在整个视口中获得拉伸div的上/左/下/右=0技巧。美好的使用伪元素可以很容易地避免封面。@Rollyng：此解决方案不适用于允许向下滚动的页面：@SimonSteinberger-只需更改

位置：绝对至<代码>位置：固定你是第一个，你是对的！！我把它带到这里是为了让你了解@j08691解决方案有一个很好的技巧（必须知道），尽管透明性很重要，但这是一个很好的技巧，但它基本上与在另一个上面有一个半透明层的想法相同。这一次，颜色层位于顶部。这种方法的问题是，你必须调整颜色和alpha值，使其恰到好处，因为使其半透明将使其褪色一点。如果您与设计师一起工作，或者如果您需要遵守固定的颜色图表，最好按照提供的颜色代码进行工作。@Rollyng抱歉，但我仍然不明白使用z-index来处理这种事情有什么意义。只需使用一个带有alpha通道的png，就像Miklos建议的那样，或者在图像中使用不透明度。是的，使用颜色作为不透明度的覆盖层是保持精确引用的一个问题。@loops，我没有使用z索引。关于alpha频道你是对的，那是干净的解决方案。THK你们两个都来看看@j08691解决方案有一个很好的技巧（必须知道），尽管透明性的值很高，但它应该是“位置：固定”的，这样才能在需要向下滚动的页面上工作。此外，为应该出现在颜色层上方的所有元素设置正确的z索引有点繁琐。
<h1>I want blue color above my texture</h1>

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

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

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

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

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