1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > htmlcss如何让背景颜色半透明? 系统自带图标字体 css

htmlcss如何让背景颜色半透明? 系统自带图标字体 css

时间:2023-01-03 01:02:16

相关推荐

htmlcss如何让背景颜色半透明? 系统自带图标字体 css

<html>

<head>

<metacharset=”utf-8″/>

<style>

div{

border:1pxredsolid;

width:800px;

height:800px;

background-color:rgba(0,0,255,0.5);

}

</style>

</head>

<body>

<div></div>

</body>

</html>

你好,html中让某个标签背景颜色变为透明,一般有两种方法。

一种是在css样式中用opacity属性来控制div的透明,这种方法会让div中的所有内容都变为半透明的效果,如下所示的例子:

<html>

<head>

<metacharset=”utf-8″/>

<style>

.aa{

width:300px;

height:300px;

background:red;

opacity:0.5;

}

.bb{

width:150px;

height:150px;

margin:50px;

background:yellow;

}

</style>

</head>

<body>

<div>背景

<div>偶是内容</div>

</div>

</body>

</html>

运行效果如下图所示:

不管是文字还是背景都变成半透明的了。

第二种方法是,通过background-color或者background属性,将颜色值设置为带透明度的值:rgba(255,255,0,0.5)。最后一个值即为设置透明度。如下例子所示:

<html>

<head>

<metacharset=”utf-8″/>

<style>

.aa{

width:300px;

height:300px;

/*background:red;*/

background-color:rgba(255,0,0,0.5)

/*opacity:0.5;*/

}

.bb{

width:150px;

height:150px;

margin:50px;

background:yellow;

}

</style>

</head>

<body>

<div>背景

<div>偶是内容</div>

</div>

</body>

</html>

运行效果如下所示:

只有背景被设置了不透明度。

希望偶的回答对你有所帮助,本,更多技术分享都在这里

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。