CSS：组合纹理和颜色 [英] CSS: Combine Texture and Color

问题描述

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

这里的纹理： >

我想我的身体背景页面如下：

我正在努力与backroung-图像和背景颜色： http://jsfiddle.net/87K72/

  body {
 background：＃6DB3F2 url（'http://s13.postimg.org/j0qiscsw3/cream.png'）; 
} 
  

解决方案

jsFiddle示例

 < h1&我的纹理以上的颜色< / h1> 
< div id =cover>< / div> 
 body {
 background：url（'http://i.stack.imgur.com/oslRB.png'）; 
} 
 h1 {
 position：relative; 
 z-index：2; 
} 
 #cover {
 position：absolute; 
顶部：0; 
 bottom：0; 
 left：0; 
 right：0; 
 background-color：rgba（109,179,242,0.5）; 
 z-index：1; 
} 
  

someone how to combine Texture use as background-image and Background-color above that texture ?

Here the texture :

I want my body background page to be like this :

I'm struggling with backroung-image and background-color : http://jsfiddle.net/87K72/

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

解决方案

You can use an overlay div with an alpha channel on top of your body but under your other elements.

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

这篇关于CSS：组合纹理和颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！