• 豌豆资源网
  • 开引网企业服务
  • 服务外包网
  • css文字不透明度怎么设置?

    在css中有很多好看的样式都可以实现,css设置出来的样式让整个网页看起来也会非常美观,今天的这篇文章就给大家来介绍一下在css中怎么设置文字的透明度,让你的文字在网页中看起来是透明的。

     

     

    CSS设置透明度可用如下两类方法实现:

    1、使用rgba
    2、使用opacity

    使用rgba设置文字不透明度的方法示例:

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <style type="text/css">
    .div{
        background:red;
        width:100px;
        height:100px;
        color:rgba(255,255,255,0.4)
    }
        </style>
    </head>
    <body>
    <div>
        我是透明文字
    </div>
    </body>
    </html>

     

    使用opacity设置文字不透明度示例:

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <style type="text/css">
    .div{
        background:red;
        width:100px;
        height:100px;   
    }
    p{opacity:0.4;}
        </style>
    </head>
    <body>
    <div>
        <p>我是透明文字</p>
    </div>
    </body>
    </html>

     

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

    posted @ 2020-05-10 16:29  前端一点红  阅读(1900)  评论(0编辑  收藏  举报
  • 乐游资源网
  • 热爱资源网
  • 灵活用工代发薪平台
  • 企服知识
  • 355软件知识