建站百科

NEWS

网站建设|网站制作中通过css设置透明色背景的两种方法

2023/2/28 10:24:47 阅读()



  本篇内容是关于“网站制作中通过css设置透明色背景”的两种方法!一般我们通过样式来设置网站的透明背景方法有这两种。1、直接使用“backgroud:rgba(R,G, B, A)”设置透明色背景。2、先使用“backgroud:颜色值;”样式来设置背景色;然后使用“opacity:透明度值”来给背景色添加一个透明度即可。那我们现在就来详细讲解下在html中设置背景颜色透明的方法。

第一种是通过rgba方式设置

  RGBA颜色,就是RGB三原色加ALPHA。在给背景添加颜色的同时,提供透明度特性。

用法:background:rgba(R,G, B, A);

    红色(R):代表颜色中的红色成分,0 到 255 间的整数(也可以使用百分比 0% ~ 100%)。

    绿色(G):代表颜色中的绿色成分,0 到 255 间的整数(也可以使用百分比 0% ~ 100%)。

    蓝色(B):代表颜色中的蓝色成分,0 到 255 间的整数(也可以使用百分比 0% ~ 100%)。

    透明度(A):代表透明度,取值 0(完全透明)~1(完全不透明) 之间。

下面我们就来看通过rgba方式设置背景颜色透明度的具体实例:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style type="text/css">
            div{
                width: 200px;
                height: 200px;
                line-height: 30px;
                text-align: center;
                margin: 0 auto;
            }
            .div1{
                background: rgba(220, 38, 38, 1);
            }
            .div2 {
               
                background: rgba(220, 38, 38, 0.5);
            }
        </style>
    </head>

    <body>
        <div class="div1">背景没有设置透明度</div><br />
        <div class="div2">背景设置了透明度</div>

    </body>

</html>



第二种是通过backgroud和opacity设置。

  通过backgroud和opacity设置背景颜色透明background属性中属性值比较简单,大家可以参考css手册,我们在这里来简单看看opacity属性。opacity属性参数的"不透明度"是以数字表示,从 0.0 至 1.0 都可以,完全透明是 0.0,完全不透明是 1.0,换句话说,数字越大代表元素越不透明。参数除了可以使用"不透明度"之外,还有 inherit 继承父层属性,不过浏览器支援度较差,不建议使用。下面我们就来看通过backgroud和opacity设置背景颜色透明度的具体实例。

实例代码:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <style type="text/css">
            div {
                width: 200px;
                height: 200px;
                line-height: 30px;
                text-align: center;
                margin: 0 auto;
                border: 1px solid #ccc;
            }
           
            .div1 {
                background: red;
            }
           
            .div2 {
               
                background: red;
                opacity: 0.5;
            }
        </style>
    </head>

    <body>
        <div class="div1">背景没有设置透明度</div><br />
        <div class="div2">背景设置了透明度</div>
    </body>

</html>


  “网站制作中通过css设置透明色背景的两种方法就介绍到这里。如果想了解更多行业相关的知识可以关注诚企网络-city86.com,小编将为大家输出更多高质量的实用文章!

本文地址:http://www.city86.com/news_view_534/

    服务热线

    24小时咨询:

    15054251826

    业务咨询:

    15966820013(微信同号)

    官方微信

    关注公众号

    扫一扫加微信

    Copyright © 2011-2023 图韵网络 鲁ICP备13019265号-7
    青岛诚企网络专业企业网站建设-企业快速建站-成品网站制作-网站定制-网站设计-专业网站建设公司.

    在线客服

    Online Service

    在线咨询

    电话沟通

    微信扫码咨询