css如何设置颜色透明度

来源：互联网 2024-10-07 20:22:50

本文操作环境：windows10系统、css 3、thinkpad t480电脑。

opacity属性可以用来设置元素背景的透明度；它需要0~1之间的值。

0表示完全透明（opacity:0）；

1表示完全不透明（opacity:1）；

立即学习“前端免费学习笔记（深入）”；

0.5表示半透明（opacity:0.5）；

语法：

opacity: value|inherit;

属性值：

value 指定不透明度。从0.0（完全透明）到1.0（完全不透明）
inherit Opacity属性的值应该从父元素继承

代码示例：

<!DOCTYPE html><html><head>    <meta charset="UTF-8">    <title>opactity</title>    <style>    .box1{                position:relative;        width:200px;height:200px;        background-color: #00f;    }         .box2{              position:absolute;              top:80px;              left:80px;              width:200px;              height:200px;              background-color:#0f0;       }       .box3{             position:relative;              width:200px;              height:200px;              background-color:#f00;              z-index:1;}</style></head><body>    <p></p>       <p></p>       <p></p></body></html>

.box1{                 position:relative;             width:200px;height:200px;            background-color: #00f;            z-index:10;            opacity:0.5;     }          .box2{               position:absolute;               top:80px;               left:80px;               width:200px;               height:200px;               background-color:#0f0;               z-index:5;               opacity:0.5;        }        .box3{               position:relative;               width:200px;               height:200px;              background-color:#f00;             z-index:1;               opacity:0.5; }

来看下运行效果：