设置CSS不透明度

顺晟科技

2021-09-15 13:14:06

191

　　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>

上一篇：H5 css3背景透明度下一篇：[摘要] CSS透明度摘要

网站建设

Css

设置CSS不透明度