div背景透明如何实现?教你两个办�

Admin 2021-04-16 群英技术资�

       我们在做网站页面设计时,往往会遇到背景透明的需求。一般,我们会用opacity属性来设置div背景透明度,其实还有别方法也能实现背景透明,这篇文章就带大家介绍一下如何现实div背景透明,本文有详细的方法示例,感兴趣的朋友可以了解一下�

       div背景透明常见的有两种方法�

       1. 通过opacity属性设置,取�0~1,0表示透明�1表示不透明,但是这种方法会把div上的内容也同时进行透明设置�

效果如下�

       2.通过rgba格式的background-color设置,格式为:background-color:rgba(0,0,0,0~1)�0表示透明�1表示不透明�

       代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .id{
            width: 600px;
            height: 300px;
        
        }
        .tm1{
            margin: 40 auto;
            text-align: center;
            line-height: 200px;
            width: 800px;
            height: 200px;
            background-color: yellow;
            opacity: 0.6;
        }
        .tm2{
            margin: 40 auto;
            text-align: center;
            line-height: 200px;
            width: 800px;
            height: 200px;
            background-color: rgba(255, 255, 0, 0.5);
        }
    </style>
</head>
<body>
    <!--背景div-->
    <div class="id">
    <!--透明div方法一-->
    <div class="tm1">透明div方法一,通过opacity设置透明度,div上的文字也透明:opacity: 0.6;</div><br>
    <!--透明div方法�-->
    <div class="tm2">透明div方法�,通过rgba设置透明�,div上面的文字不透明:background-color:rgba(255,0,0,0.5);</div>
</div>
</body>
</html> 

       这里还有一点要注意�:rgba() 函数使用红®、绿(G)、蓝(B)、透明�(A)的叠加来生成各式各样的颜色�

       RGBA 即红色、绿色、蓝色、透明度(英语:Red, Green, Blue、Alpha)�
       红色(R�0 � 255 间的整数,代表颜色中的红色成分。�
       绿色(G�0 � 255 间的整数,代表颜色中的绿色成分�
       蓝色(B�0 � 255 间的整数,代表颜色中的蓝色成分�
       透明度(A)取� 0~1 之间� 代表透明度�
       可以百度百科查找rgba�.
       类似�:

       以上就是实现div背景透明的示例介绍,对新手来说本文有一定的参考价值,希望对大家学习有帮助�

标签� div背景透明

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

猜你喜欢

群英网络开启智能安全云计算之旅

注册领取新人大礼�
专业资深工程师驻�
7X24小时快速响�
一站式无忧技术支�
免费备案服务

联系我们

24小时售后 24小时售后TEL�0668-2555666 售前咨询TEL�400-678-4567 投诉建议TEL�0668-2555999 投诉建议邮箱:t[email protected] 信息安全TEL�0668-2555118 域名空间客服 公司总机�0668-2555555 公司传真�0668-2555000
免费拨打  400-678-4567
免费拨打  400-678-4567 免费拨打 400-678-4567 � 0668-2555555
在线客服
微信公众号
返回顶部
返回顶部 返回顶部