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

    css如何让字改变透明度

    青灯夜游青灯夜游2021-09-13 17:05:08原创112

    css让字改变透明度的方法:1、使用opacity属性,给文字元素添加“opacity:透明度值;”样式即可;2、使用rgba()函数,给文字元素添加“color:rgba(red, green, blue, 透明度值);”样式即可。

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

    css让字改变透明度

    方法1、使用opacity属性

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    	</head>
    	<body>
    		<div style="opacity:1;">测试文字</div>
    		<div style="opacity:0.5;">测试文字</div>
    		<div style="opacity:0.2;">测试文字</div>
    	</body>
    </html>

    1.png

    Opacity属性设置一个元素了透明度级别。

    语法:

    opacity: value;

    value:指定不透明度。从0.0(完全透明)到1.0(完全不透明)。

    方法2:使用rgba()函数

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    	</head>
    	<body>
    		<div style="color: rgba(255,0,0,1)">测试文字</div>
    		<div style="color: rgba(255,0,0,0.5)">测试文字</div>
    		<div style="color: rgba(255,0,0,0.2)">测试文字</div>
    	</body>
    </html>

    效果图:

    2.png

    rgba() 函数使用红(R)、绿(G)、蓝(B)、透明度(A)的叠加来生成各式各样的颜色。

    语法:

    rgba(red, green, blue, alpha)

    属性值:

    描述
    red定义红色值,取值范围为 0 ~ 255,也可以使用百分比 0% ~ 100%。
    green定义绿色值,取值范围为 0 ~ 255,也可以使用百分比 0% ~ 100%。
    blue定义蓝色值,取值范围为 0 ~ 255,也可以使用百分比 0% ~ 100%。
    alpha - 透明度定义透明度 0(完全透明) ~ 1(完全不透明)

    (学习视频分享:css视频教程

    以上就是css如何让字改变透明度的详细内容,更多请关注php中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:css 透明度
    上一篇:css怎么写六边形 下一篇:css隐藏元素的方式有哪些
    线上培训班

    相关文章推荐

    • css英文是什么意思• 怎么设置css文本不可选中• css怎么隐藏border• css如何设置行内间隔• css怎么写六边形

    全部评论我要评论

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

    PHP中文网