提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  其他

当前栏目

CSS3 opacity 属性

属性css3 opacity
2023-06-13 09:11:26 时间

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

设置 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>

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/141095.html原文链接：https://javaforall.cn

相关文章