在這個例子中,我試著讓父元素更透明,而不改變子元素的不透明度。
<div> <div className="larger-box"> <div className = "smaller-box"> </div> </div>
這是我目前的CSS樣式:
.larger-box{ width: 10rem; height: 10rem; background-color: red; } .smaller-box{ width: 2rem; height: 2rem; background-color: green; opacity: 1 !important; }
有沒有可能在CSS中實現這個效果?
你可以使用CSS的
not
。孩子總是會受到父母的不透明度的影響,所以給它們不同的不透明度的最簡單方法是將它們設為兄弟元素,並將第二個元素絕對定位在第一個元素的上方,從而使每個元素都有自己的不透明度。請注意父包裝div的position: relative。
在這裡,我有一些文字顯示在紅色div的後面,綠色div位於其上方,就像它是一個子元素一樣,但實際上它是一個兄弟元素,因此不受紅色div的不透明度的影響。因此,文字透過紅色div顯示,但不透過綠色div顯示。