Question

我正在尝试将半透明颜色图层添加到图像顶部以作为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中完成所有这些吗？

Answer 1

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

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

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

Answer 2

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

有一种想法是你可以尝试使用alpha透明的PNG，但我不是百分之百的。

Answer 3

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

虽然有一种方法！

我们可以使用渐变来代替使用rgba（）或hsla（）的透明泛色。渐变在技术上是背景图像，因此不受规则的限制，它们不能在堆叠顺序中排在第一位（顶部）。

＆＃13;

/* 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);
}

＆＃13;

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

image with background color

没有包装的图像上的透明色

3 个答案: