我想要做的是在图像中制作背景颜色(具有不透明度),我可以在不受背景颜色影响的情况下实现此目的吗?这里的问题是背景颜色与不透明度,它使一切都透明,包括文本和图像。
这是我的代码:
CSS
div.Image {
background: url("http://fc07.deviantart.net/fs43/i/2009/141/e/e/Vista_orb_by_fediaFedia.png")center center no-repeat;
background-size: 40px 40px;
position: relative;
background-position: 50% 0px;
}
div.trans-bg {
background-color: #646464;
opacity: 0.5;
border-radius: 3px;
border: 2px ridge #7AC3D1;
position: absolute;
}
div.trans-bg p {
text-shadow: 1px 2px 2px #000;
margin: 5%;
padding-top: 45px;
width: 100px;
color: #fff;
text-align: center;
}

<div class="trans-bg">
<div class="Image">
<p>Windows 7</p>
</div>
</div>
&#13;
答案 0 :(得分:1)
尝试使用rgba而不是不透明度。
background-color: rgba(100, 100, 100, 0.29);
不透明度会更改块级元素中包含的所有内容, 而用RGBA设置不透明度会改变 元素本身的不透明度。
答案 1 :(得分:0)
首先。你还想删除父div上的opactity。这将影响所有儿童div。这就是图像div上的BG颜色受到影响的原因。
div.trans-bg {
background-color: #646464;
opacity: 0.5;
border-radius: 3px;
border: 2px ridge #7AC3D1;
position: absolute;
}
接下来,您需要使用背景颜色来设置颜色,而不会影响图像div上的图像BG css。
background-color: #000;