CSS3之opacity属性的简单使用

全栈程序员站长

发布于 2022-08-24 19:43:52

38300

代码可运行

文章被收录于专栏：全栈程序员必看全栈程序员必看

运行总次数：0

代码可运行

大家好，又见面了，我是你们的朋友全栈君。

什么是opacity？

opacity 属性设置元素的不透明级别。

怎么使用？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>	CSS3之opacity属性的简单使用</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: red;
            margin: 0 auto;

            /*
            opacity 属性设置元素的不透明级别。
            本元素的不透明度是 0.5。请注意，文本和背景色都受到不透明级别的影响。
            取值范围：从 0.0 （完全透明）到 1.0（完全不透明）。

            详细见：http://www.w3school.com.cn/cssref/pr_opacity.asp
            */
            opacity: 0.5;
        }
    </style>
</head>
<body>
    <div>
        opacity属性的简单使用
    </div>

</body>
</html>

效果图：