Question

我有一个DIV，我想把一个模式作为背景。这种模式是灰色的。所以为了让它更好一点，我想把一个透明的浅色“层”放在上面。以下是我尝试但不起作用的内容。有没有办法将彩色图层放在背景图像上？

这是我的CSS：

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

Answer 1

我知道这是一个非常古老的主题，但它出现在Google的顶部，所以这是另一个选择。

这是一个纯CSS，并不需要任何额外的HTML。

box-shadow: inset 0 0 0 1000px rgba(0,0,0,.2);

盒子阴影功能的使用数量惊人。

Answer 2

这是：

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

当然，如果里面没有其他元素，你需要为.background类定义宽度和高度

Answer 3

来自CSS-Tricks ......有一个步骤可以做到这一点，没有z-indexing和添加伪元素 - 需要线性渐变，我认为这意味着你需要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);
}

Answer 4

您还可以使用线性渐变和图像： 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');
}

这是因为线性渐变功能会创建一个添加到背景堆栈的Image。 https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient

Answer 5

然后你需要一个带有bg图像的包装元素，其中包含带有bg颜色的content元素：

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

Answer 6

试试这个。适合我。

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

Answer 7

我已将此作为一种方法，既可以将颜色色调和渐变应用于图像，也可以在无法控制图像颜色配置文件时使动态叠加文本更易于设置。你不必担心z-index。

<强> HTML

<div class="background-image"></div>

<强> SASS

.background-image {
  background: url('../img/bg/diagonalnoise.png') repeat;
  &:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(248, 247, 216, 0.7);
  }
}

<强> CSS

.background-image {
  background: url('../img/bg/diagonalnoise.png') repeat;
}

.background-image:before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: rgba(248, 247, 216, 0.7);
  }

希望有所帮助

Answer 8

请参阅https://stackoverflow.com/a/18471979/193494的答案，全面了解可能的解决方案：

使用具有线性渐变的多个背景
生成PNG的多个背景，或
样式化：在伪元素之后充当辅助背景层。

Answer 9

为什么这么复杂？你的解决方案几乎是正确的，除了它更容易使图案透明，背景颜色坚固。 PNG可以包含透明胶片。因此，通过将图层设置为70％并重新保存图像，使用photoshop使图案变得透明。那你只需要一个选择器。跨浏览器工作。

CSS：

.background {
   background: url('../img/bg/diagonalnoise.png');/* transparent png image*/
   background-color: rgb(248, 247, 216);
}

HTML：

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

Answer 10

您可以使用半透明像素，即使在base64中也可以生成例如here 以下是白色50％的示例：

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

无需上传
没有额外的HTML
我认为加载应该比盒阴影或线性渐变

Answer 11

我只是在目标背景div上使用了 background-image css属性。
请注意，背景图片仅接受渐变颜色功能。
因此，我使用线性渐变两次添加了相同的所需叠加颜色（使用上一个rgba值来控制颜色不透明度）。

还找到了以下两个有用的资源：

在背景图片上方添加文本（或带有其他任何内容的div）：Hero Image
仅模糊背景图片，而不会模糊顶部的div：Blurred Background Image

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

Answer 12

这是只有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>

Answer 13

另一种带有SVG的内嵌重叠式图片（请注意：如果您在svg代码内使用#，则必须对此进行urlencode！）：

background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1"><path fill="rgba(255, 255, 255, 0.4)" d="M0 0h1v1H0z"/></svg>')
                no-repeat center center/cover, 
            url('overlayed-image.jpg') no-repeat center center/cover;

Answer 14

您还可以为覆盖颜色添加不透明度。

代替做

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

您可以这样做：

background: url('../img/bg/diagonalnoise.png');

然后为不透明度颜色创建新样式：

.colorStyle{
    background-color: rgba(248, 247, 216, 0.7);
    opacity: 0.8;
}

将不透明度更改为低于1的任意数字。然后使该颜色样式与图像的大小相同。应该可以。

Answer 15

isPoisoned

#img-div{
    height: 100vh;
    background-image: url("https://images.pexels.com/photos/46160/field-clouds-sky-earth-46160.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
}

#overlay-div{
    background-color: rgba(0, 0, 0, 0.5);
    height: 100vh;
    position: relative;
}

背景图像上的半透明颜色层？

15 个答案: