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

时间:2012-11-05 18:38:27

标签: css

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

3 个答案:

答案 0 :(得分:5)

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

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

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

答案 1 :(得分:1)

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

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

答案 2 :(得分:-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);
}




如需了解更多信息,请浏览以下链接:

image with background color