基本上，我有一個div背景設置爲圖像和opacity的0.5。在div內部，我試圖將同一個img作爲一個圓圈。但是，它也得到了0.5 opacity。允許不透明的容器，但不是子元素
確保這不會發生的一種好方法是什麼？
<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;
}
更新 的rgba語法不爲背景圖像的工作。在這種情況下，通過Michael_B回答是更好。
更新
一個更好的解釋，請this SO post。
原始
opacity被應用到全子樹。如果您不希望將其應用於子元素，則可以使用rgba語法as suggested by MDN。
實施例：background: rgba(0, 0, 0, 0.6) url(<your_url>);
隨着opacity，效果適用於整個元件，包括子元素和內容。
從MDN：
中的數值適用於元素作爲一個整體，包括其內容， 即使價值不是由子元素繼承。因此，即使元素及其子元素具有不同的相對於彼此的不透明度，元素及其包含的子元素也具有與元素背景相對的相對不透明度 。
此規則的例外是background-color設置爲rgba()。
rgba()規則允許通過alpha通道設置opacity。
因此，您可以將父項設置爲div { background-color: rgba (0, 255, 255, 0.5); }，並且這將單獨設置opacity爲0.5,background-color。子元素將不受影響。
這裏瞭解更多：A brief introduction to Opacity and RGBA
如果使用的圖像是必須的，看到這些帖子：
@ user1354934讀你的問題了幾個後更多次，是您想要獲得一個矩形圖像的效果，該圖像在中心圓中是不透明的，但在其他區域中會褪色？如果是這種情況，'rgba（）'可能無法提供幫助。 – PSWai