css 实现背景半透明有两种方法,rgba设置背景色 和 opacity 属性。两种方法在实现的效果上有所差异,通过实例可更好的说明。
一、使用 rgba 设置背景色。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
<title>CSS实现背景色半透明的两种方法</title>
<style>
.background {
width: 160px;
height: 160px;
padding: 50px;
background-color: rgba(0, 255, 0, 0.5);
}
.content {
width: 160px;
height: 160px;
background-color: red;
}
</style>
</head>
<body>
<div class="background">
<div class="content">我是内容</div>
</div>
</body>
</html>
效果如下:
二、使用 opacity 属性。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
<title>CSS实现背景色半透明的两种方法</title>
<style>
.background {
width: 160px;
height: 160px;
padding: 50px;
background-color: green;
opacity: 0.5;
}
.content {
width: 160px;
height: 160px;
background-color: red;
}
</style>
</head>
<body>
<div class="background">
<div class="content">我是内容</div>
</div>
</body>
</html>
效果如下:
通过对比两种方法的区别就很清楚了:rgba 是让元素本身背景色半透明,而 opacity 是让元素及其子元素全部半透明。
在实践中,有时会遇到必须使用 opacity 属性,而有不希望子元素半透明的需求。这时可以通过改变元素父子关系及定位方式的方法,让元素看上去还有父子关系。
比如,还使用上面的例子,修改如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
<title>CSS实现背景色半透明的两种方法</title>
<style>
.background {
width: 160px;
height: 160px;
padding: 50px;
background-color: green;
opacity: 0.5;
}
.content {
position: absolute;
top: 55px;
left: 55px;
width: 160px;
height: 160px;
background-color: red;
}
</style>
</head>
<body>
<div class="background"></div>
<div class="content">我是内容</div>
</body>
</html>
效果如下:
-
css详解系列:10-Flex项目属性orderorder 属性 用来设置或检索弹性盒模型对象的项目(子元素)在容器中出现的順序。
-
css详解系列:11-Flex项目属性align-selfalign-self属性定义flex子项单独在侧轴(纵轴)方向上的对齐方式。
-
css实现点击切换图片效果的方法在css中我们可以使用伪类选择器来实现点击切换图片的效果,看看如何实现的。
-
css样式表的三种样式css(级联样式表)主要有三种样式定义方式
-
如何在css中实现样式优先级在css中,样式优先级是由一系列规则决定的,这些规则决定了当多个样式规则应用于同一个HTML元素时,哪个规则会优先生效。
-
css文本超出显示3个点的方法在css中,如果你想让超出特定长度的文本显示为三个点(...),你可以使用text-overflow属性,配合overflow和white-space属性。
暂无评论,抢个沙发...