• 技术文章 >web前端 >css教程

    网页设计中css怎么实现背景透明?(示例)

    藏色散人藏色散人2018-08-25 17:36:32原创7454
    在网页设计中,有时候会需要实现css背景透明文字不透明的效果。那么通过css怎么让背景透明呢?本篇文章就给大家介绍关于如何用css设置背景透明并且文字不透明的方法。希望对有需要的朋友有所帮助。

    css背景透明文字不透明的具体代码示例如下:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>css div背景透明示例</title>
        <style>
            *{
                padding: 0;
                margin: 0;
            }
    
            body{
                padding: 50px;
                background: url(img/2.png) 0 0 repeat;
            }
    
            .demo{
                padding: 25px;
                background-color: rgba(0,0,0,0.5);/* IE9、标准浏览器、IE6和部分IE7内核的浏览器(如QQ浏览器)会读懂 */
            }
            .demo p{
                color: #FFFFFF;
            }
        </style>
    </head>
    <body>
    <div class="demo">
        <p>css背景透明文字不透明</p>
    </div>
    </body>
    </html>

    效果如下图:

    84cba21da8d0b62f9eedb36fead75d0.png

    从上图可以明显看出,css实现了div背景透明,并且文字不透明的效果。这里我们需要掌握的知识点就是,background-color中的rgba()函数。在css中使用rgba(0,0,0,0.5);这样的格式来表示rgha。其中最后一个参数表示Alpha通道,表示透明度。

    这里也顺便说一下CSS 中的颜色有三种定义方式:使用颜色方法(RGB、RGBA、HSL、HSLA),十六进制颜色值和预定义的颜色名称。 RGBA 是代表Red(红色) Green(绿色) Blue(蓝色)和 Alpha(不透明度)三个单词的缩写。

    取值:

    R红色值。正整数 | 百分数
    G绿色值。正整数 | 百分数
    B蓝色值。正整数 | 百分数
    AAlpha透明度。取值0~1之间。

    那么通过以上关于用css设置背景透明,文字不透明的效果内容介绍,希望对有需要的朋友有所帮助。

    以上就是网页设计中css怎么实现背景透明?(示例)的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    上一篇:怎么使用css代码制作网站导航栏?(示例) 下一篇:如何使用纯CSS实现一只红色的愤怒小鸟(附代码)
    Web大前端开发直播班

    相关文章推荐

    • src或者css背景图的url值为base64编码代码_HTML/Xhtml_网页制作• css背景透明文字不透明_html/css_WEB-ITnose• 求css背景透明与文字不透明的方法_html/css_WEB-ITnose• css背景颜色渐变_html/css_WEB-ITnose

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网