Question

我制作了一个白色透明的div来突出我的内容。我知道正在使用background-color: rgba(255, 255, 255, 0.5);，但我也有背景图片。我如何用背景图像也有白色透明色？

.div {
    width: auto;
    padding: 20px;
    height: 80px;
    background: url('../img/dark_embroidery.png');
    background-repeat: repeat;  
    background-color: rgba(255, 255, 255, 0.5);
}

Answer 1

背景图像下的背景颜色。如果图像不透明且具有div的完整大小，则隐藏白色背景。

您可以使用第二个元素设置白色叠加。

<style>
    .div {/* your styles */}
    .div > div {background: rgba(255, 255, 255, .5)}
</style>    

<div class=div>
    <div>
        CONTENT
    </div>
</div>

jsfiddle.net/9gadzskv

或者，第二种方式，让你png图像透明（或更好地说，为png图像添加不透明度）。

Answer 2

无需编辑图像或使用其他标记，您可以使用绝对定位的伪元素来实现此目的。

为您的div提供以下样式：

.div{
    background:url(../img/dark_embroidery.png) no-repeat;
    height:80px;
    padding:20px;
    position:relative;
    width:auto;
}
.div:before{
    background:rgba(255,255,255,.5);
    bottom:0;
    content:"";
    display:block;
    left:0;
    position:absolute;
    right:0;
    top:0;
}

另一种选择是使用多个背景。您可以通过提供逗号分隔的背景列表来实现，这些背景将按照提供的顺序从上到下分层。但请注意，此处只能使用图像，因此您需要使用白色渐变。

.div{
    background:linear-gradient(0deg,rgba(255,255,255,.5),rgba(255,255,255,.5)),url(../img/dark_embroidery.png) no-repeat;
    height:80px;
    padding:20px;
    position:relative;
    width:auto;
}

CSS白色透明div

2 个答案: