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

Question

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

这是我的CSS:

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

Answer 1

我知道这是一个非常古老的主题,但它在谷歌的顶部显示,所以这是另一种选择.

这个是纯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:

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

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

Answer 3

从CSS-Tricks ...有一个步骤,没有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);
}

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>

上海社会科学院

.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

有关可能的解决方案的全面概述,请参阅/sf/answers/1293038561/上的答案:

1. 使用具有线性渐变的多个背景,
2. 具有生成的PNG的多个背景,或
3. 样式化:在伪元素之后充当辅助背景层.

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

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

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

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

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

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

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

Answer 11

来自我的回答：如何向背景图像添加颜色叠加？标记为该问题的重复项，其中不需要伪元素，也不需要额外元素。

就在这里和几年后，该副本仍然缺少background-blend-mode当今广泛实施的属性（它位于多个背景和插图阴影示例下方）。

这是我的答案，它为您提供了 3 种简单的方法，无需额外的标记或伪代码：

起初，我当时看到了两个简单的选项（2016年，这两个选项也在此处的答案之内，所以关于这些没有什么真正新的内容要添加，...如果您已经阅读了有关 bg 和 的其他答案，请注意第三个选项盒子阴影）：

• 来自我的旧代码笔的图像上带有半透明单渐变的多个背景，其中有几个例子。

• 巨大的嵌入阴影，其作用与渐变叠加大致相同

那里给出的例子：

渐变选项：

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Images/Using_CSS_gradients

CSS 渐变由数据类型表示<gradient>，这是一种由<image>两种或多种颜色之间的渐进过渡组成的特殊类型。您可以选择三种类型的渐变：线性（使用linear-gradient()函数创建）、径向（使用radial-gradient()函数创建）和圆锥曲线（使用conic-gradient()函数创建）。您还可以使用repeating-linear-gradient()、repeating-radial-gradient()、 和repeating-conic-gradient()函数创建重复渐变。

渐变可以用在任何需要使用的地方<image>，例如背景。由于渐变是动态生成的，因此它们可以消除传统上用于实现类似效果的光栅图像文件的需要。此外，由于渐变是由浏览器生成的，因此放大时它们看起来比光栅图像更好，并且可以动态调整大小。

    html {
      min-height:100%;
      background:linear-gradient(0deg, rgba(255, 0, 150, 0.3), rgba(255, 0, 150, 0.3)), url(https://picsum.photos/id/100/2500/1656);
      background-size:cover;
    }

阴影选项：

https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow

CSS属性box-shadow在元素框架周围添加阴影效果。您可以设置多个效果，以逗号分隔。盒子阴影由相对于元素的 X 和 Y 偏移、模糊和扩散半径以及颜色来描述。

插图

如果未指定（默认），则假定阴影为投影（就好像框在内容上方凸起）。inset 关键字的存在将阴影更改为框架内的阴影（就好像内容被压在框内一样）。嵌入阴影绘制在边框内（甚至是透明边框）、背景上方、内容下方。

html {
  min-height: 100%;
  background: url(https://picsum.photos/id/100/2500/1656);
  background-size: cover;
  box-shadow: inset 0 0 0 2000px rgba(255, 0, 150, 0.3);
}

我的一个旧代码笔，有几个例子

现在，这里缺少第三个选项：

• 使用背景混合模式：

CSSbackground-blend-mode属性设置元素的背景图像应如何相互混合以及与元素的背景颜色混合。

html {
  min-height: 100%;
  background: url(https://picsum.photos/id/100/2500/1656) rgba(255, 0, 150, 0.3);
  background-size: cover;
  background-blend-mode: multiply;
}

当然，还有其他有价值的方法可以做到这一点，具体取决于您的项目、使用的 CSS 库以及您现有的选项。几乎从来没有单一的方式/方法，而是不同的方式。重要的是找到最适合您的需求且最有效的选项，您理解/掌握的方法，浏览器的特殊性，已使用的选项留下的选项如果您对或已经拥有可以/完成这项工作的 javascript 或服务器端函数有信心，请使用它（如果它已经存在）。轮子就是轮子。