我有一个DIV,我想把一个模式作为背景。这个图案是灰色的。所以为了让它更漂亮一点,我想在上面加一个浅色透明的颜色“图层”。下面是我尝试过但没有成功的方法。有没有办法把彩色图层放在背景图像上?

这是我的CSS:

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

当前回答

使用前伪类和使用不透明度

.left-side {
  position: relative;
  background-color: #5200ff; /*bg color*/
}

.left-side::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-image: url(./images/img.jpeg);  /*bg image*/
  background-size: cover;
  background-position: 100%;
  opacity: 0.22;  /*use opacity to show bg color */
}

其他回答

下面就是:

.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:

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

当然,如果.background类中没有其他元素,则需要为它定义宽度和高度

这里有一个更简单的技巧,只有css。

<div class="background"> </div> <style> .background { position:relative; height:50px; background-color: rgba(248, 247, 216, 0.7); background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAJElEQVQYV2NctWrVfwYkEBYWxojMZ6SDAmT7QGx0K1EcRBsFAADeG/3M/HteAAAAAElFTkSuQmCC); } .background:after { content:" "; background-color:inherit; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } </style>

您可以使用半透明像素,例如,您可以在base64中生成它 下面是一个白人占50%的例子:

background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8Xw8AAoMBgDTD2qgAAAAASUVORK5CYII=),
url(../img/leftpanel/intro1.png);
background-size: cover, cover;

没有上传 无需额外的HTML 我想加载应该比盒影或线性渐变更快

background-image: linear-gradient(180deg, rgba(255,255,255,0) 0, rgba(0,0,0,0.6) 0),url(images/image.jpg);

然后你需要一个bg图像的包装元素和bg颜色的内容元素:

<div id="Wrapper">
  <div id="Content">
    <!-- content here -->
  </div>
</div>

还有css:

#Wrapper{
    background:url(../img/bg/diagonalnoise.png); 
    width:300px; 
    height:300px;
}

#Content{
    background-color:rgba(248,247,216,0.7); 
    width:100%; 
    height:100%;
}