如何使用css设置文字透明背景不透明

PHP中文网 JavaScript

本文摘自PHP中文网，作者青灯夜游，侵删。

在css中，可以使用color属性配合rgba()函数来设置文字透明背景不透明效果，语法格式为“rgba(red, green, blue, alpha)”；其中，参数alpha用于设置透明度，值介于“0.0”和“1.0”之间。

本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。

css设置文字透明背景不透明

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <style type="text/css">

            div{

                background: palevioletred;

                width: 200px;

                height: 200px;

            }

            .box {

                 

                color: rgba(255, 255, 255, 0.4)

            }

        </style>

    </head>

 

    <body>

        <div>

            <span>我是正常文字</span><br />

            <span class="box">我是透明文字</span>

        </div>

    </body>

 

</html>

效果图：

1.png

css RGBA

RGBA 的意思是（Red-Green-Blue-Alpha）它是在 RGB 上扩展包括了 “alpha” 通道，运行对颜色值设置透明度。

语法：

1

RGBA(R,G,B,A)

取值：

  • R：红色值。正整数 | 百分数

  • G：绿色值。正整数 | 百分数

  • B：蓝色值。正整数 | 百分数

  • A：Alpha透明度,取值0~1之间。

推荐教程：CSS视频教程

以上就是如何使用css设置文字透明背景不透明的详细内容，更多文章请关注木庄网络博客！

相关阅读 >>

如何使用css制作箭头符号

如何解决myeclipse 8.5 css乱码问题

display:inline是什么意思？

css怎么实现文字横排

css如何剪切元素??clip属性的使用

css指的是什么

css中px和pt的区别是什么

css怎样让两个div重叠

用css3实现打点效果实例讲解

css怎么设置文本左对齐

更多相关阅读请进入《css》频道 >>




标签：

打赏

取消

感谢您的支持，我会继续努力的!

扫码支持
扫码打赏，您说多少就多少

打开支付宝扫一扫，即可进行扫码打赏哦

分享从这里开始，精彩与您同在

相关推荐

评论

管理员已关闭评论功能...