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

【问题标题】：Semi-transparent color layer over background-image?背景图像上的半透明颜色层？
【发布时间】：2012-02-29 06:39:56
【问题描述】：

我有一个 DIV，我想把一个图案作为背景。这个图案是灰色的。所以为了让它更漂亮一点，我想在上面放一个透明的浅色“层”。以下是我尝试过但没有奏效的方法。有没有办法将彩色图层放在背景图像上？

这是我的 CSS：

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

【问题讨论】：

标签： css background-image background-color

【解决方案1】：

我知道这是一个非常老的帖子，但它显示在 Google 的顶部，所以这里有另一个选项。

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

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

box-shadow 功能的用途非常多。

【讨论】：

尽管这是一个惊人的可能性，但它仅在 IE 9+ 中受支持，这意味着截至 2014 年 10 月忽略了 1.8% 的网络用户。
非常好！在性能方面这是一个好主意吗？没有研究过 box-shadow 的性能
不错的 hack，但却是一个很大的性能杀手。这将减慢每个移动设备的速度。盒子阴影会导致移动设备上的性能问题。最好避免它，特别是如果有其他方法可以走。
几年后的更新：我目前在 kotulas.com 上都使用这种方法，而且我没有注意到明显的减速。如果您在数百个元素上使用它可能会成为一个问题，但即使在包含 150 多个图像的页面上，这对我来说也不是问题。（这是在工作计算机上。）自然，您需要提前对其进行测试，以确保它适合您。至于旧浏览器的兼容性，由于后备是用户看不到悬停效果（没有其他问题），我对此表示满意。
我个人是这样使用的：box-shadow: inset 0 0 0 100vmax rgba(0, 0, 0, .2).

【解决方案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：

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

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

【讨论】：

绝对没有理由进行相对和绝对定位。
啊，是的，当然，我有点进入模态弹出窗口，不知道为什么。你的答案当然更干净，更容易。
@JohannesKlauß 为什么他的回答更简洁、更容易？它不起作用，至少对我来说是这样。
我认为这更干净。如果内容不长于 bg 等，则 box-shadow 会出现问题。
不是我最喜欢的答案。 Josh Crozier 的回答将帮助您在没有额外元素的情况下做事，而 BevansDesign 可以帮助您在没有任何伪元素的情况下实现一切（如果您出于 CMS 原因想使用内联 css，这将是必要的）。

【解决方案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);
}

【讨论】：

这很好用，你不能为渐变设置动画，但是如果你想改变颜色，不要认为任何方法都可以。
我在这个元素上设置了background-size:cover; 和background-position:center center;。这似乎取消了这种效果。
使用 background-size:cover 效果很好；后。至少在 chrome 上。
绝对是为背景图案和图像着色的最方便的方法，但要小心使用 Chrome 和其他工具进行检查，特别是如果应用于 body 标签，chrome 会滚动延迟一吨。 FF 处理得很好。
我是唯一一个年纪大到可以得到汤姆推荐信的人吗？

【解决方案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');
}

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

【讨论】：

【解决方案5】：

试试这个。对我有用。

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

【讨论】：

这是一个非常棒的答案，不需要额外的 HTML 元素。谢谢！

【解决方案6】：

然后您需要一个带有 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%;
}

【讨论】：

【解决方案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);
  }

希望对你有帮助

【讨论】：

这行得通，但您需要更改第二个“left: 0;”到“底部：0；”
这应该是公认的答案，因为它避免了不必要的元素创建。只要确保你的 .background-image div 至少有一个位置：relative

【解决方案8】：

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

使用具有线性渐变的多个背景，
带有生成的 PNG 的多个背景，或
设计一个 :after 伪元素以充当辅助背景层。

【讨论】：

请不要发布链接作为答案。将相关代码放在这里，但另外链接到您复制它的源代码。

【解决方案9】：

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

CSS：

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

HTML：

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

这是基本的。下面是一个使用示例，我从background 切换到background-image，但两个属性的工作方式相同。

body { margin: 0; }
div {
   height: 110px !important;
   padding: 1em;
   text-transform: uppercase;
   font-family: Arial, Helvetica, sans-serif;
   font-weight: 600;
   color: white;
   text-shadow: 0 0 2px #333;
}
.background {
   background-image: url('https://www.transparenttextures.com/patterns/arabesque.png');/* transparent png image */
   }
.col-one {
  background-color: rgb(255, 255, 0);
}
.col-two {
  background-color: rgb(0, 255, 255);
}
.col-three {
  background-color: rgb(0, 255, 0);
}

<div class="background col-one">
 1. Background
</div> 
<div class="background col-two">
 2. Background
</div> 
<div class="background col-three">
 3. Background
</div>

请稍等！加载外部模式需要一些时间。

这个网站好像有点慢...

【讨论】：

你可以应用背景颜色，例如:hover，它会覆盖在背景图像的顶部吗？
启动 Photoshop 并执行此操作需要更长的时间，而不是添加几行代码。
我试过了，但发现透明 png 的文件很大（~500kb），这可能是这种方法的缺点
@madz 我谈到了制作一个模式 - 这不应该导致一个大文件。我添加了一个使用只有 5kb 的 110x110px 图像的示例。如果您确实需要更大的图像，请尝试使用tinypng.com 对其进行压缩。

【解决方案10】：

这是一个更简单的技巧，只有 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>

【讨论】：

【解决方案11】：

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

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

不上传
没有额外的 html
我猜加载应该比 box-shadow 或线性渐变更快

【讨论】：

【解决方案12】：

另一个使用 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;

【讨论】：

【解决方案13】：

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

【讨论】：

【解决方案14】：

我只是在目标背景 div 上使用了 background-image css 属性。
注意 background-image 只接受渐变色函数。
所以我使用线性渐变添加了两次相同的所需叠加颜色（使用最后一个 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%);
}

【讨论】：

【解决方案15】：

实际上，我以不同的方式使用了:before，我只使用了一个HTML元素<div>，并且只使用了一个CSS类名并使用了伪元素技巧：

.background {
  /* ↓↓↓ the decorative CSS */

  font-family: tahoma;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
  border-radius: 8px;
  overflow: hidden;
  
  /* ↓↓↓ the main CSS */

  position: relative;
  background: url('https://picsum.photos/id/355/600/400') no-repeat center / cover;
  z-index: 1;
}

.background:before {
  /* ↓↓↓ the main CSS */

  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(255, 255, 255, 0.5);
  z-index: -1;
}

.text {
  /* ↓↓↓ the decorative CSS */

  font-size: 20px;
  color: #072252;
}

<div class="background">
  <span class="text">Some child</span>
  <span class="text"></span>
</div>

【讨论】：

【解决方案16】：

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

而不是做

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 的任意数字。然后将此颜色样式设置为与图像相同的大小。它应该可以工作。

【讨论】：

【解决方案17】：

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

<div id="img-div">
  <div id="overlay-div"></div>
</div>

【讨论】：

【解决方案18】：

在伪类之前使用并使用不透明度

.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 */
}

【讨论】：