CSS3 opacity 属性

DAYNOTE 专栏收录该内容
27 篇文章 0 订阅

设置 div 元素的不透明级别

1、属性

opacity属性指定了一个元素的透明度。换言之,opacity属性指定了一个元素后面的背景的被覆盖程度。

当opacity属性的值应用于某个元素上时,是把这个元素(包括它的内容)当成一个整体看待,即使这个值没有被子元素继承。因此,一个元素和它包含的子元素都会具有和元素背景相同的透明度,哪怕这个元素和它的子元素有不同的opacity属性值。

2、语法

opacity: value|inherit;
描述
value规定不透明度。从 0.0 (完全透明)到 1.0(完全不透明)。
inherit应该从父元素继承 opacity 属性的值。

3、案例分析

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>调整元素透明度</title>
        <style type="text/css">
            .light{
                width: 200px;
                height: 20px;
                background-color: blue;
                opacity: 0;
            }
            .medium{
                width: 200px;
                height: 20px;
                background-color: blue;
                opacity: 0.5;
            }
            .heavy{
                width: 200px;
                height: 20px;
                background-color: blue;
                opacity: 1;
            }
            .father{
                width: 400px;
                height: 20px;
                background-color: blue;
                opacity: inherit;
            }
        </style>
    </head>
    <body>
    <div class="light">元素完全透明</div>
    <div class="medium">元素半透明</div>
    <div class="heavy">元素完全不透明</div>
    <div class="father">
        <div class="son">元素跟随父元素继承 opacity 属性的值</div>
    </div>


    </body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ti2beDIb-1584675708999)(D:\DAYNOTE\opacity.png)]

  • 2
    点赞
  • 0
    评论
  • 9
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 游动-白 设计师:白松林 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值