如何更改div背景的不透明度,而不会改变文本或其中任何内容的不透明度?
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div class="bg">
<h1>welcome</h1>
<p>Hello world. Welcome to my site</p>
</div>
</body>
</html>
<style>
.bg{
background-color: black;
color: #ffffff;
}
</style>
答案 0 :(得分:5)
您是否尝试使用RGBa表示法,其中'a'代表alpha(不透明度或透明度)?
<style>
.bg {
background-color: rgba(0, 0, 0, 0.5);
color: #ffffff;
}
</style>
答案 1 :(得分:3)
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div class="bg">
<h1>welcome</h1>
<p>Hello world. Welcome to my site</p>
</div>
</body>
</html>
<style>
.bg{
background: rgba(0, 0, 0, 0.6);
color: #ffffff;
}
</style>
答案 2 :(得分:3)
此代码仅更改背景不透明度
.bg{
background: rgba(0, 0, 0, 0.6);
color: #ffffff;
}
答案 3 :(得分:2)
仅使用rgba
更改背景不透明度.bg{
background: rgba(0, 0, 0, 0.6);
color: #ffffff;
}
答案 4 :(得分:0)
在CSS中使用rgba()
实际上很容易,但是很多人都不知道。
大多数人都知道使用rgb(255,255,255)
代替#FFFFFF
来设置颜色
您可以设置背景不透明度(与透明度相反,其中1为实心,0为完全透明)。
.bg {
background-color: rgba(0,0,0,0.5) //This sets background to black, with half transparency
color: #FFFFFF;
}
答案 5 :(得分:0)
<style>
.backgorund_opacity {
background-color: rgba(0, 0, 0, 0.5); /* 0.5 use for opacity ( 0.0-0.9 )*/
}
</style>
您也可以像
一样使用.background {
opacity: 0.5;
}