美文网首页
23.透明度 opacity

23.透明度 opacity

作者: 欣博客 | 来源:发表于2020-02-19 22:52 被阅读0次

opacity可以用来设置元素背景的透明

它需要一个0-1之间的值
0 表示完全透明
1 表示完全不透明
0.5 表示半透明

opacity属性在IE8及以下的浏览器中不支持

IE8及以下的浏览器需要使用如下属性代替
alpha(opacity=透明度)
透明度,需要一个0-100之间的值
0 表示完全透明
100 表示完全不透明
50 半透明

这种方式支持IE6,但是这种效果在IE Tester中无法测试

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>透明背景</title>

        <style type="text/css">

            .box1{
                width: 200px;
                height: 200px;
                background-color: red;
                opacity: 0.5;
                filter: alpha(opacity=50);
            }

        </style>

    </head>
    <body>
        <div class="box1"></div>
    </body>
</html>

预览:

image.png

相关文章

  • 23.透明度 opacity

    opacity可以用来设置元素背景的透明 它需要一个0-1之间的值0 表示完全透明1 表示完全不透明0.5 表示半...

  • css:1.颜色及背景的方法

    颜色定义: opacity 透明度的属性 rgba()和opacity都能实现透明效果但是opacity是...

  • HTML透明度样式filter和opacity

    HTML透明度样式filter和opacity opacity属性   opacity是CSS3的属性, 能够元...

  • CSS笔记14:透明度(opacity)

    1. opacity opacity透明度opacity:number;其中,number为0-1之间的浮点数,用...

  • 12

    透明度:opacity:0.3; //ff chrom 高级浏览器filter:alpha(opacity=3...

  • 透明度和精灵图

    1:透明度{ opacity:***;=透明度:***;(范围0~1) rgba:****; r:红色 g:绿色...

  • Flutter Opacity 使用介绍

    Opacity class介绍 Opacity class是个widget控件,它可以改变子widget的透明度。...

  • opacity

    Opacity: Css3 opacity透明度设置 所有主流浏览器都支持opacity属性。. IE8和早期版本...

  • CSS透明度:

    CSS透明度: opacity:0.5;是最重要的。 filter:alpha(opacity=50);这个是为I...

  • flutter透明度

    Opacity 透明度组件 颜色透明度参考:https://www.cnblogs.com/xiaochii/p...

网友评论

      本文标题:23.透明度 opacity

      本文链接:https://www.haomeiwen.com/subject/pqezfhtx.html