半透明颜色层在背景图像？ [英] Semi-transparent color layer over background-image?

问题描述

我有一个DIV，我想把图案作为背景。此模式为灰色。所以要使它更好一点，我想把一个透明的颜色层。下面是我试过，但没有工作。有没有办法把彩色层放在背景图像上？预先感谢您的回复。干杯。

  background：url（' ../img/bg/diagonalnoise.png'）; 
 background-color：rgba（248，247，216，0.7）; 
  

解决方案

这是：

  .background {
 background：url（'../ img / bg / diagonalnoise.png'）; 
 position：relative; 
} 
 
 .layer {
 background-color：rgba（248，247，216，0.7）; 
 position：absolute; 
 top：0; 
 left：0; 
 width：100％; 
 height：100％; 
} 
  

此HTML的HTML：

 < div class =background> 
< div class =layer> 
< / div> 
< / div> 
  

当然，你需要定义一个宽度和高度到 .background 类，如果其中没有其他元素

I have a DIV and I would like to put a pattern as background. This pattern is gray. So to make it a little more nice, I would like to put a light transparent color "layer" over. Below is what I tried but which did not work. Is there a way to put the colored layer over the background image? Thank you in advance for your replies. Cheers. Marc.

Here's my CSS:

background: url('../img/bg/diagonalnoise.png');
background-color: rgba(248, 247, 216, 0.7);

解决方案

Here it is:

.background {
    background:url('../img/bg/diagonalnoise.png');
    position: relative;
}

.layer {
    background-color: rgba(248, 247, 216, 0.7);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

HTML for this:

<div class="background">
    <div class="layer">
    </div>
</div>

Of course you need to define a width and height to the .background class, if there are no other elements inside of it

这篇关于半透明颜色层在背景图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！