• 技术文章 >web前端 >前端问答

    html中怎么设置字体透明度

    青灯夜游青灯夜游2021-12-23 18:02:55原创1381

    html中设置字体透明度的方法:1、利用color属性和rgba()函数,语法为“字体元素{color: rgba(红色值, 绿色值, 蓝色值, 透明度值);}”;2、利用opacity属性,语法“字体元素{opacity:透明度值;}”。

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

    html中设置字体透明度的方法:

    1、利用color属性和rgba()函数

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<style>
    			.p1{
    				color: rgba(0, 0, 0, 1);
    			}
    			.p2{
    				color: rgba(0, 0, 0, 0.6);
    			}
    			.p3{
    				color: rgba(0, 0, 0, 0.4);
    			}
    			.p4{
    				color: rgba(0, 0, 0, 0.2);
    			}
    			
    		</style>
    	</head>
    	<body bgcolor="#AFEEEE">
    		<p class="p1">测试文本</p>
    		<p class="p2">测试文本</p>
    		<p class="p3">测试文本</p>
    		<p class="p4">测试文本</p>
    	</body>
    </html>

    1.png

    2、利用opacity属性

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<style>
    			.p1{
    				opacity:1;
    			}
    			.p2{
    				opacity: 0.6;
    			}
    			.p3{
    				opacity:0.4;
    			}
    			.p4{
    				opacity:0.2;
    			}
    			
    		</style>
    	</head>
    	<body bgcolor="#00aa7f">
    		<p class="p1">测试文本</p>
    		<p class="p2">测试文本</p>
    		<p class="p3">测试文本</p>
    		<p class="p4">测试文本</p>
    	</body>
    </html>

    2.png

    相关推荐:《html视频教程

    以上就是html中怎么设置字体透明度的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:html 字体透明度
    上一篇:html的盒子模型有几种 下一篇:vue中插件和组件的区别是什么
    千万级数据并发解决方案

    相关文章推荐

    • html5中什么是输出元素• html不常用的标签有哪些• HTML怎么设置td内容居中• html的盒子模型有几种• html5怎么实现进度条
    1/1

    PHP中文网