CSS opacity設置不透明度

時間 2019-12-13

原文原文鏈接

　　1.opacity設置不透明度html

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

<!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>

相關標籤/搜索