91超碰碰碰碰久久久久久综合_超碰av人澡人澡人澡人澡人掠_国产黄大片在线观看画质优化_txt小说免费全本

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

CSS-opacity子元素繼承父元素透明度的實現方法

發布時間:2021-03-17 11:32:58 來源:億速云 閱讀:478 作者:清風 欄目:web開發

這篇“CSS-opacity子元素繼承父元素透明度的實現方法”除了程序員外大部分人都不太理解,今天小編為了讓大家更加理解“CSS-opacity子元素繼承父元素透明度的實現方法”,給大家總結了以下內容,具有一定借鑒價值,內容詳細步驟清晰,細節處理妥當,希望大家通過這篇文章有所收獲,下面讓我們一起來看看具體內容吧。

分析原因:

父元素背景顏色設置透明度opacity:0.5,子元素會繼承,給子元素設置opacity:1,子元素的透明度也是在父元素0.5的基礎上設置的。

第一種方法:

父元素背景顏色設置透明度時,避免使用background:#000;opacity:0.5,建議使用background:rgba(0,0,0,0.5)

第二種方法:

如果設置背景色為漸變色等這種復雜背景,第一種方法就不在適用。
 

background-image: linear-gradient(-180deg, rgba(20,20,20,0.00) 19%, #303030 100%);
opacity: 0.5;

因為子元素會繼承父元素的opacity屬性,我們讓它不成為子元素。新增一個子元素,將其絕對定位到父元素位置,然后在該元素上設置背景色與透明度。

<div class="container">
    <div class="content">
        <p>我是class為content的DIV</p>
        <p>我的背景是class為background的背景</p>
        <p>通過相對定位和絕對定位,我把class為background的DIV移動到了我的位置。</p>
        <p>同時通過我的較大的z-index浮在了它的上面。 :)</p>
    </div>
    <div class="background"></div>
</div>
.container {
    width: 300px;
    height: 250px;
    color: #fff;
    position:relative;
}
.content {
    position:relative;
    z-index:5;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.background {
    background-color: #37a7d7;
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    z-index:1;
    /*兼容IE7、8 */
       -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=50);
    opacity:.5;
}

感謝你的閱讀,希望你對“CSS-opacity子元素繼承父元素透明度的實現方法”這一關鍵問題有了一定的理解,具體使用情況還需要大家自己動手實驗使用過才能領會,快去試試吧,如果想閱讀更多相關知識點的文章,歡迎關注億速云行業資訊頻道!

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

中江县| 丰都县| 响水县| 仪陇县| 建平县| 湛江市| 芷江| 元氏县| 光泽县| 六安市| 柘荣县| 岳西县| 承德市| 鄯善县| 雅安市| 庆云县| 鸡东县| 策勒县| 根河市| 江山市| 卢氏县| 泸州市| 潮安县| 呼图壁县| 阿坝| 穆棱市| 江阴市| 太仆寺旗| 台东市| 宁陵县| 金湖县| 民县| 东宁县| 手游| 大荔县| 临桂县| 柳江县| 高平市| 连州市| 沁源县| 封开县|