讓孩子的不透明度與CSS的父不透明度不同

Question

這是我的box類

.rectangle-box {
    width: 200px;
    height: 30px;
    background: #808080;
    opacity: 0.3;
    float: right;
}

.rectangle-red {
    width: 65px;
    height: 30px;
    background: #ff4742;
    opacity: 1;
    float: left;
}

在HTML中：

<div class="rectangle-box">
    <div class="rectangle-red"></div>
</div>

演示： https ： //jsfiddle.net/uq6ectfc/1/

我需要rectangle-red ，不透明度為1 ， rectangle-box為0.3 。 但它堅持父母的不透明。

我該如何解決？

Answer 1

你不能不opacity不能大於父

但你可以使用兩種方法

我用過rgba rgba(0,0,0,0.0)

 .rectangle-box { width: 200px; height: 30px; background: rgba(128, 128, 128, 0.3); float: right; position: relative; } .rectangle-red { width: 65px; height: 30px; background: #ff4742; opacity: 1; float: left; } 

 <div class="rectangle-box"> <div class="rectangle-red"></div> </div> 

或者我使用的第二種方法:pseudo元素添加background

 .rectangle-box { width: 200px; height: 30px; float: right; position: relative; } .rectangle-box:after { content: ''; opacity: 0.3; background: #808080; position: absolute; left: 0; right: 0; bottom: 0; top: 0; z-index:-1; } .rectangle-red { width: 65px; height: 30px; background: #ff4742; opacity: 1; float: left; } 

 <div class="rectangle-box"> <div class="rectangle-red"></div> </div> 

Answer 2

使用RGBA而不是十六進制。 使用不透明度：影響子元素，而rgba則不影響子元素

.rectangle-box {
        width: 200px;
        height: 30px;
        background-color: rgba(128,128,128, 0.3);
        float: right;

    }

    .rectangle-red {
        width: 65px;
        height: 30px;
        background-color: rgba(255,71,66, 1);
      float: left;
    } 

Answer 3

一種更好的結構方法是創建一個包含兩個框的div。 這樣，每個盒子的不透明度都不會相互干擾。

<div class="container">
    <div class="rectangle-box"></div>
    <div class="rectangle-red"></div>
</div>

.container{
    width: 200px;
    height: 30px;
    float: right;
}
.rectangle-box {
    width: 100%;
    height: 100%;
    background: #808080;
    opacity: 0.3;
}

.rectangle-red {
    width: 65px;
    height: 100%;
    background: #ff4742;
    opacity: 1;
    float: left;
}

Answer 4

你不能

所有你能做的就是在.rectangle-box absolute（我的情況）或者相對或任何你想要的低透明度下創建元素。低.lower-opacity所以他們是兄弟姐妹而不是互相干擾不透明屬性

.rectangle-box {
    width: 200px;
    height: 30px;
    float: right;
    position: relative;
}
.lower-opacity{
    position: absolute;
    opacity: 0.3;
    width: 100%;
    height: 100%;
    background: #808080; //**EDITED** BACKGROUND NOW WILL BE TRANSPARENT
}
.rectangle-red {
    width: 65px;
    height: 30px;
    background: #ff4742;
    opacity: 1;
    float: left;
}


<div class="rectangle-box">
    <div class="lower-opacity"></div>
    <div class="rectangle-red"></div>
</div>

Answer 5

這是一個使用偽元素的漂亮和整潔的方式。

有了這個，您還可以為每個背景添加圖像和svg，這提供了很多選項。

如果你需要每個框中的其他元素，你需要第二個內部div。

 .rectangle-box { width: 200px; height: 30px; float: right; position: relative; } .rectangle-box:before { content: ""; top: 0; left: 0; width: 100%; height: 100%; position: absolute; background: #808080; opacity: 0.3; } .rectangle-box:after { content: ""; top: 0; left: 0; width: 65px; height: 100%; position: absolute; background: #ff4742; opacity: 1; } 

 <div class="rectangle-box"> </div>