透明度_透明度设置 - CSDN
精华内容
参与话题
  • CSS中的透明度设置

    千次阅读 2019-07-13 12:45:38
    CSS3中透明度设置 1.两种设置方式 background-color:rgba(r,g,b,a); r:红 g:绿 b:蓝 a:透明度 background-color:rgb(r,g,b) opcity:0.5; <!DOCTYPE html> <html lang="en"> <head> <...

    CSS3中透明度设置

    1.两种设置方式

    • 语法
    background-color:rgba(r,g,b,a);
    
    r:红
    g:绿
    b:蓝
    a:透明度
    
    background-color:rgb(r,g,b)
    opcity:0.5;
    
    • 代码
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>CSS中透明度设置</title>
        <style>
            /*不设置透明度*/
            .box1{
                background-color:rgb(217, 107, 116);
                font-size: 36px;
            }
            /*透明度为0.5*/
            .box2{
                background-color:rgba(217, 107, 116,0.5);
                font-size: 36px;
            }
            /*透明度为0.5*/
            .box3{
                background-color:rgb(217, 107, 116);
                font-size: 36px;
                opacity: 0.5;
            }
        </style>
    </head>
    <body>
    <div class="box1"> 曾经的照片还留在那个房间</div>
    <div class="box2"> 曾经的照片还留在那个房间</div>
    <div class="box3"> 曾经的照片还留在那个房间</div>
    
    </body>
    </html>
    

    在这里插入图片描述

    2. 两者区别

    opticy设置的透明度会把其所有内容和元素都设置为透明的,rgba设置的透明度只会把设置为该属性所对应的操作设置为透明的。

    展开全文
  • CSS设置背景透明度

    万次阅读 2020-08-10 17:31:08
    实现透明的css方法通常有以下3种方式,以下是不透明度都为80%的写法:css3的opacity:x,x 的取值从 0 到 1,如opacity: 0.8css3的rgba(red, green, blue, alpha),alpha的取值从 0 到 1,如rgba(255,255,255,0.8)IE...

    实现透明的css方法通常有以下3种方式,以下是不透明度都为80%的写法:

    css3的opacity:x,x 的取值从 0 到 1,如opacity: 0.8

    css3的rgba(red, green, blue, alpha),alpha的取值从 0 到 1,如rgba(255,255,255,0.8)

    IE专属滤镜 filter:Alpha(opacity=x),x 的取值从 0 到 100,如filter:Alpha(opacity=80)

    一、css3的opacity

    兼容性:IE6、7、8不支持,IE9及以上版本和标准浏览器都支持

    使用说明:设置opacity元素的所有后代元素会随着一起具有透明性,一般用于调整图片或者模块的整体不透明度

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>背景透明度</title>
    <style>
    .demo{
      padding: 25px;
      background-color:#000000;
      filter:alpha(opacity:50); opacity:0.5;  -moz-opacity:0.5;-khtml-opacity: 0.5;
    }
    .demo p{
        color: #FFFFFF;
    }
    </style>
    </head>
    <body>    
    
    <div class="demo">
        <p>背景透明,文字也透明</p>
    </div>
    </body>
    </html>

    使用opacity后整个模块都透明了,展现如下:

    那么使用opacity实现《背景透明,文字不透明》是不可取的。

    二、css3的rgba

    所谓RGBA颜色,顾名思意就是R+G+B+A的颜色,再具体点就是red+green+blue+alpha的颜色,翻译一下就是红+绿+蓝+Alpha透明的颜色。

     

    background:rgba(200, 54, 54, 0.5);
    

    其中,表示半透明度的0.5前面的0是可以省掉的,直接.5也是可以的。

    兼容性:IE6、7、8不支持,IE9及以上版本和标准浏览器都支持

    解决IE8浏览器不支持rgba的方法:

     

    background:rgba(0,0,0,0.5); filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7F000000,endcolorstr=#7F000000);

    使用说明:设置颜色的不透明度,一般用于调整background-color、color、box-shadow等的不透明度。

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>css3的rgba</title>
    <style>
    .demo{
      padding: 25px;
      background-color:#000000;/* IE6和部分IE7内核的浏览器(如QQ浏览器)下颜色被覆盖 */
      background-color:rgba(0,0,0,0.2); /* IE6和部分IE7内核的浏览器(如QQ浏览器)会读懂,但解析为透明 */
    }
    .demo p{
        color: #FFFFFF;
    }
    </style>
    </head>
    <body>    
    <div class="demo">
        <p>背景透明,文字也透明</p>
    </div>
    </body>
    </html>

    在background-color中使用rgba,标准浏览器中,背景透明,文字不透明,展现如下:

    那么使用rgba实现背景透明,文字不透明是可取的。

    展开全文
  • css设置透明度的两种方法

    万次阅读 2019-05-24 20:41:04
    一、css rgba()设置颜色透明度 语法: rgba(R,G,B,A); RGBA 是代表Red(红色) Green(绿色) Blue(蓝色)和 Alpha(不透明度)三个单词的缩写。RGBA 颜色值是 RGB 颜色值的扩展,带有一个 alpha 通道 - 它规定...

    一、css rgba()设置颜色透明度

    语法:

    rgba(R,G,B,A;
    

    RGBA 是代表Red(红色) Green(绿色) Blue(蓝色)和 Alpha(不透明度)三个单词的缩写。RGBA 颜色值是 RGB 颜色值的扩展,带有一个 alpha 通道 - 它规定了对象的不透明度。

    rgba()里的值的介绍:

    R:红色值。正整数 (0~255)

    G:绿色值。正整数 (0~255)

    B:蓝色值。正整数(0~255)

    A:透明度。取值0~1之间

    rgba()只是单纯的可以设置颜色透明度,这样在页面的布局中有很多应用。比如说:让背景出现透明效果,但上面的文字不透明。

    代码实例:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>rgba()</title>
            <style>
                .demo{
                    width: 350px;
                    height: 300px;
                    margin: 50px auto;
                }
                .demo *{
                    width: 120px;
                    height: 120px;
                    margin: 10px;
                    float: left;
                }
                .demo1{
                    background:rgba(255,0,0,1);
                }
                .demo2{
                   background:rgba(255,0,0,0.5);
                }
            </style>
        </head>
        <body>
            <div class="demo">
                <div class="demo1">背景色不透明,文字不透明!</div>
                <div class="demo2">背景色半透明,文字不透明!</div>
            </div>
        </body>
    </html>
    

    效果图:
    在这里插入图片描述上例中,设置的颜色值是一样的,只是透明度不同。这样看不出来有除了颜色之外的不同,我们在父容器demo上也设置一个背景色,这样的效果图:

    在这里插入图片描述这样就可以看出:第一个盒子(demo1)没有设置透明度,红色完全把下面盒子(demo)的颜色给覆盖住了;第二个盒子(demo2)设置了透明度,使得颜色半透明,没有把下面盒子(demo)的颜色给完全覆盖,而是混合显示了。

    二、css opacity属性设置背景透明度

    语法:

    opacity: value ;
    

    value :指定不透明度,从0.0(完全透明)到1.0(完全不透明)。

    opacity属性具有继承性,会使容器中的所有元素都具有透明度;

    代码实例:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>opacity属性</title>
            <style>
                .demo{
                    width: 280px;
                    height: 140px;
                    margin: 50px auto;
                }
                .demo1,.demo2{
                    width: 120px;
                    height: 120px;
                    margin: 10px;
                    float: left;
                    background:#2DC4CB;
                }
                .demo1{
                    opacity:1;
                }
                .demo2{
                    opacity:0.5;
                }
            </style>
        </head>
        <body>
            <div class="demo">
                <div class="demo1">
                    <p>背景色不透明,文字不透明!</p>
                </div>
                <div class="demo2">
                    <p>背景色透明,文字也透明!</p>
                </div>
            </div>
        </body>
    </html>
    

    效果图:

    在这里插入图片描述
    opacity:0.5;使得demo2容器的所以元素都呈现半透明。

    总结: rgba()方法与opacity方法虽然都可以实现透明度效果,但rgba()只作用于元素的颜色或其背景色(设置了rgb()透明度元素的子元素不会继承其透明效果);而opacity具有继承性,既作用于元素本身,也会使元素内的所有子元素具有透明度。

    展开全文
  • Android关于透明度对应表

    千次阅读 2019-07-16 11:23:19
    100% — FF 95% — F2 90% — E6 85% — D9 80% — CC 75% — BF 70% — B3 65% — A6 60% — 99 55% — 8C 50% — 80 45% — 73 40% — 66 35% — 59 30% — 4D 25% — 40 20% — 33 ...0

    100% — FF(完全不透明)
    95% — F2
    90% — E6
    85% — D9
    80% — CC
    75% — BF
    70% — B3
    65% — A6
    60% — 99
    55% — 8C
    50% — 80
    45% — 73
    40% — 66
    35% — 59
    30% — 4D
    25% — 40
    20% — 33
    15% — 26
    10% — 1A
    5% — 0D
    0% — 00(完全透明)
    格式如#00FFFFFF,前两位代表不透明度的十六进制。00表示完全透明,FF就是全不透明。依次递增。

    展开全文
  • CSS之透明度

    万次阅读 2019-07-06 17:05:48
    文章目录opacityrgba ...opacity opacity: 0.2; /*0~1的数字*/ opacity使用的时候很方便,但是使用opacity的时候,其他的内容比如字体颜色也会变浅,所以我推荐使用rgba(); rgba 四个数字以逗号分隔开,前面三个数字...
  • 颜色透明度计算

    2019-09-02 15:38:45
    我们在开发过程中,经常遇到这样一件事, 设计师给你一个颜色值,然后告诉你这个颜色值有30%的透明度。大多数人会问30%的透明度是多少呢?怎么计算这个30%的透明度? 颜色值通常遵循RGB/ARGB标准,使用时通常以#...
  • 透明度

    2020-10-10 16:35:04
    透明度叠加,且字体不透明 开始是用的opacity,后面发现字体也会随着背景而改变 后续查到其他写法 background: rgba(255, 255, 255, 0.7); rgba里面是背景对应的RGB,不会可以查一下css中RGB的写法,0.7是透明...
  • 最全的Android 颜色透明度

    万次阅读 多人点赞 2018-03-10 23:42:00
    如果视觉稿直接给颜色值那倒没啥,可怕的是后面还有标了透明度,而且视觉还原后发现颜色太透明了,要你透明度再调调,这才烦人。我总不能记住100个透明度的值吧。 一次计算,无数次使用,这文章,稳了。 正文 ...
  • 从图中可见,GridColor可以调整颜色,GridAlpha可以调整网格线颜色深浅(也可以说是透明度),LineWidth可以调整线宽等等。 使用举例: set(gca,'ygrid','on','gridlinestyle','--','Gridalpha',0.4) ...
  • Android 透明度数值

    万次阅读 多人点赞 2016-03-03 16:36:09
    透明度为了便于查找,记录一下Android透明度对应的数值。 透明度 数值 100% FF 95% F2 90% E6 85% D9 80% CC 75% BF 70% B3 65% A6 60% 99 55% 8C 50% 80 45% 73 40% 66 35% 59 30%
  • android 如何设置背景的透明度

    万次阅读 多人点赞 2011-10-27 14:26:49
    颜色和不透明度 (alpha) 值以十六进制表示法表示。任何一种颜色的值范围都是 0 到 255(00 到 ff)。对于 alpha,00 表示完全透明,ff 表示完全不透明。表达式顺序是“aabbggrr”,其中aa=alpha(00 到 ff);bb=...
  • html中如何设置背景和背景颜色的透明度
  • Android 颜色透明度换算

    万次阅读 多人点赞 2016-10-13 09:59:43
    每次开发的时候,UI在设计图中标注的颜色都是类似于#FF0000(红色),这倒没什么,但是呢后面却标注了30%的透明度,这下抓狂了,透明度怎么计算?不用着急,不用你算,收藏我这篇文章即可。 颜色简介 Android...
  • html设置透明度

    万次阅读 2020-06-16 17:01:34
    在html中,设置元素的透明度 在css相应元素中添加下面代码即可。 opacity:0.5; opacity的取值范围为0~1,0表示不透明,1表示全透明
  • 关于设置背景图片的透明度(html+css)

    万次阅读 多人点赞 2018-03-22 16:58:24
    2018.3.22设置背景图片的透明度,而不是颜色这种,是图片显示这个就跟某些博客能够换背景图片当主题一样的道理,看了好久终于搞清楚了&lt;body&gt;里面是不能直接设置图片的透明度的需要借助&lt;div&...
  • CSS 中无法直接给背景图片加 opacity 属性,可以使用下面的方法绕过这个限制: div { width: 200px; height: 200px; display: block; position: relative; } div::after { content: "......
  • 微信小程序透明度 opacity

    万次阅读 2018-01-18 11:24:34
    wxml文件中 :style="opacity:{{number}}" number代表透明度的值 取值范围0—1 0代表不透明 1代表全透明  具体应用中可在js文件中写个方法对number根据用户动作进行动态设置
  • html5 css3 颜色表示和透明度设置

    万次阅读 2016-02-13 21:21:09
    css3中颜色的几种表示法: ... 3.rgba(n,n,n,m),m为0到1之间的数,表示透明度; 4.hsl(颜色(色轮值),饱和度,亮度) 又称色轮模式; 透明度问题: opacity 设置透明度 transparent 绝对透明 相当于透明度设置为1 <!
  • JS控制DIV的透明度

    万次阅读 2017-04-22 19:38:44
    Layer1.style.alpha = "50%"; 不中? 仅支持 FF document.getElementById("Layer1").style.opacity = "0.5"; IE Only document.getElementById("Layer1").style.filter = "alpha(opacity=50%)";...
  • Android颜色透明度(不透明度)计算

    万次阅读 2017-06-14 17:00:56
    我们在开发过程中经常看到美工给你的标注颜色类似于`#0000FF`(蓝色)这样的颜色码,然后还可能有一个不透明度
1 2 3 4 5 ... 20
收藏数 300,737
精华内容 120,294
关键字:

透明度