首页 > Web开发 > 详细

CSS opacity设置不透明度

时间:2019-02-12 11:32:36      阅读:203      评论:0      收藏:0      [点我收藏+]

  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>

 

CSS opacity设置不透明度

原文:https://www.cnblogs.com/whylinux/p/10364232.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!