4

我正在尝试在图像顶部添加一个半透明的颜色层作为 div 的背景。我尝试了以下方法：

background: url('myImage.jpg'), rgba(0,0,0,0.5);

还

background-image:url('myImage.jpg');
background-color:rgba(0,0,0,0.5);

但在这两种情况下，只显示图像。我知道我可以用颜色将这个 div 包装在另一个 div 中，但是有什么方法可以在一个 div 中完成所有操作吗？

4

3 回答 3

5

使用:after选择器。它可以解决你的问题。

.container:after {
    content: "";
    display: block;
    width: 300px;
    height: 200px;
    background-color:rgba(0,0,0,0.5);
}

示例在这里 - http://jsfiddle.net/ecYrS/2/

于 2012-11-05T19:00:43.717 回答
1

CSS 不支持您在本地尝试执行的操作 - 您需要在图像上放置一个 RGBa 层。您基本上想要在背景图像上添加一个半透明层，但 CSS 将在背景图像上设置优先级，基本上覆盖任何背景颜色。

一个想法是你可以尝试一个 alpha 透明的 PNG，但我不是 100% 的。

于 2012-11-05T18:42:22.187 回答
-1

@Flynn 面临与您提到的相同的问题。我想出了一个非常方便的解决方案。

不过有办法！

我们可以使用渐变，而不是使用 rgba() 或 hsla() 使用透明泛色。渐变在技术上是背景图像，因此不受堆叠顺序中它们不能排在首位（位于顶部）的规则的约束。

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

欲了解更多信息，请浏览以下链接：

带有背景颜色的图像

于 2016-04-19T10:09:24.807 回答