css怎么设置不透明

发布时间:2021-04-17 09:11:38 作者:小新
来源:亿速云 阅读:228

小编给大家分享一下css怎么设置不透明,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

css设置不透明的方法是使用【css rgba()】设置颜色透明度,RGBA颜色值是RGB颜色值的扩展,带有一个alpha通道,语法为【rgba(R,G,B,A);】。

本教程操作环境:windows7系统、css3版,DELL G3电脑。

css设置不透明的方法:

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>

效果图:

css怎么设置不透明

以上是“css怎么设置不透明”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注亿速云行业资讯频道!

推荐阅读:
  1. css实现图像透明与不透明的方法
  2. css中img不透明度的设置方法

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

css

上一篇:css元素怎么隐藏

下一篇:怎么引入css

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》