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

这是我的CSS:

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

当前回答

试试这个。对我有用。

.background {
    background-image: url(images/images.jpg);
    display: block;
    position: relative;
}

.background::after {
    content: "";
    background: rgba(45, 88, 35, 0.7);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

.background > * {
    z-index: 10;
}

其他回答

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

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

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

# img-div { 身高:100 vh; 背景图片:url (https://images.pexels.com/photos/46160/field -云的天空-地球- 46160. - jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260”); 背景位置:中心; background-size:封面; 平铺方式:不再重演; 位置:相对; } # overlay-div { Background-color: rgba(0,0,0,0.5); 身高:100 vh; 位置:相对; } < div id = " img-div " > < div id = " overlay-div " > < / div > < / div >

你也可以使用线性渐变和图像: http://codepen.io/anon/pen/RPweox

.background{
  background: linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.5)),
    url('http://www.imageurl.com');
}

这是因为线性梯度函数创建的图像被添加到背景堆栈中。https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient

从css技巧…有一个一步的方法来做到这一点,没有z索引和添加伪元素-需要线性梯度,我认为这意味着你需要CSS3支持

.tinted-image {
  background-image: 
    /* top, transparent red */
    linear-gradient(
      rgba(255, 0, 0, 0.45), 
      rgba(255, 0, 0, 0.45)
    ),
    /* your image */
    url(image.jpg);
}

我只是在目标背景div上使用background-image css属性。 注意background-image只接受渐变颜色函数。 所以我使用线性渐变添加相同的叠加颜色两次(使用最后的rgba值来控制颜色不透明度)。

此外,还找到了以下两个有用的资源:

在背景图像上添加文本(或任何其他内容的div):英雄图像 只模糊背景图像,不模糊上面的div:模糊背景图像

HTML

<div class="header_div">
</div>

<div class="header_text">
  <h1>Header Text</h1>
</div>

CSS

.header_div {
  position: relative;
  text-align: cover;
  min-height: 90vh;
  margin-top: 5vh;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100vw;
  background-image: linear-gradient(rgba(38, 32, 96, 0.2), rgba(38, 32, 96, 0.4)), url("images\\header img2.jpg");
  filter: blur(2px);
}

.header_text {
  position: absolute;
  top: 50%;
  right: 50%;
  transform: translate(50%, -50%);
}