CSS opacity設置不透明度

本文轉載自查看原文 2019-02-12 10:43 1289 前端開發

　　1.opacity設置不透明度

　　　　opacity會將含有這個屬性的子類都變成具有opacity屬性，可以改變元素、元素內容、字標簽的不透明度。而rgba只會改變設置的那個背景顏色的透明度效果

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>03透明度示例</title>

    <style>
        .c1 {
            height: 400px;
            width: 400px;
            background-color: black;
            /*opacity: 0.5;   !* 設置不透明度，可以改變元素內容、子標簽的透明度 *!*/
            /*color: red;*/
        }

        .c1 {
            color: red;
           opacity: 0.5;
        }

        .c2 {
            color: red;
            background-color: rgba(0, 0, 0, 0.5);   /* 不會改變元素內容的透明度，只會改變背景的透明度 */
        }

    </style>

</head>
<body>


<div class="c1">設置元素不透明度</div>
<div class="c2">我是c2類的標簽</div>

</body>
</html>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 CSS中的opacity，不透明度的坑 css文字不透明度怎么設置？不透明度opacity進階不透明度opacity進階背景設置透明度字體不透明 VTK 體繪制討論_不透明度傳輸函數 unity+改變材質顏色與不透明度 div設置背景顏色添加透明度，內部元素不透明 css中使用rgba和opacity設置透明度的區別 opacity(透明度)屬性設置