在許多的時候我們在前端開發培訓學習中都會設計到透明度的問題，當我們向父元素中添加子元素的時候，就會發現子元素繼承了父元素的透明度。而在某些情況下這是我們不希望發生的。即使你重新設置子元素的透明度為不透明，它仍然會繼承父元素的透明度。

要怎樣解決這個問題呢？一般我們的前端培訓老師會讓我們使用絕對定位來使這些元素看起來像父子關系，然后再進行設置。

方法1：

.outer{

width:200px;

height:200px;

background:#000;

filter:alpha(opacity=20);

opacity:.2;

}

.inner{

width:200px;

height:200px;

margin-top:-200px;

}??????

<div class="outer"><!--我是透明的容器--></div>

<div class="inner">我是不透明的內容</div>

 

原理是容器層與內容層并級，容器層設置透明度，內容層通過負margin或者position絕對定位等方式覆蓋到容器層上

 

方法2：

.outer{

width:200px;

height:200px;

background:rgba(0,0,0,.2);

background:#000\9;

filter:alpha(opacity=20)\9;

}

.outer?.inner{position:relative\9;}????

<div class="outer">?

<div class="inner">我是不透明的內容</div>

</div>

高級瀏覽器直接使用rgba顏色值實現；IE瀏覽器在定義容器透明的同時，讓子節點相對定位，也可達到效果

想要了解跟多關于前端培訓課程內容歡迎關注尚硅谷前端培訓，尚硅谷除了這些技術文章外還有免費的高質量前端培訓課程視頻供廣大學員下載學習