基本上,我有一个div,背景设置为图像,不透明度为0.5.在div中,我试图将同样的img放在一个圆圈中.但是,它也获得0.5不透明度.
有什么好方法可以确保不会发生这种情况？
<div class="bg-img" ng-style="{'background':'url({{vm.large}}) center / cover'}">
<img ng-src="{{vm.large}}">
</div>
.bg-img {
height: 140px;
position: relative;
opacity: 0.6;
}
.bg-img img {
width: 100px;
height: 100px;
border-radius: 50%;
position: absolute;
}
解决方法
使用
opacity时,效果将应用于整个元素,包括子元素和内容.
从MDN开始：
The value applies to the element as a whole,including its contents,
even though the value is not inherited by child elements. Thus,an
element and its contained children all have the same opacity relative
to the element’s background,even if the element and its children have
different opacities relative to one another.
此规则的例外是使用rgba()设置背景颜色.
rgba()规则允许通过alpha通道设置不透明度.
所以你可以将父设置为div {background-color：rgba(0,255,0.5); },这将仅在背景颜色上将不透明度设置为0.5.子元素不受影响.
在这里了解更多：A brief introduction to Opacity and RGBA
如果必须使用图像,请参阅以下帖子：
> Can I set an opacity only to the background image of a div?
> CSS: set background image with opacity?
