理论
opacity
opacity:x,css3中有opacity设定透明度,其数值在[0,1]范围内,当数值为0时即为全透明,而1为不透明,opacity适用于整个元素(包括其内容)。
background
background:rgba(r,g,b,a),r:红色值,g:绿色值,b:蓝色值,a:Alpha透明度,取[0,1]之间,正整数为十进制0~255任意值,而百分比亦之同理。
区别
opacity在设定上会适用于整个元素,也就是说它不仅仅对自己生效,还会影响其子元素的透明度(不管其子元素透明度多少都会以设定opacity为主)
background在设定上只对其本身起作用,不会被子元素所继承。原因在于,其通过alpha通道去操作元素,而非直接去影响dom
案例
展示
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 40%;
height: 40%;
position: absolute;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.content {
position: relative;
}
.common {
position: absolute;
width: 60%;
height: 60%;
border-radius: 15px;
background: #808080;
color: white;
height: 40%;
}
</style>
</head>
<body>
<div class="box">
<div class="content">
<p>Internet has been playing an increasingly important role in our daily life. It has brought a lot of benefits but has created some serious problems as well. With the development of science and technology, there are more and more people believe
that e-books will replace traditional books. Internet has been playing an increasingly important role in our daily life. It has brought a lot of benefits but has created some serious problems as well. With the development of science and
technology, there are more and more people believe that e-books will replace traditional books. Internet has been playing an increasingly important role in our daily life. It has brought a lot of benefits but has created some serious problems
as well. With the development of science and technology, there are more and more people believe that e-books will replace traditional books.
</p>
写在后面
本文章思路来自MAD与CSDN,感谢以上站点与作者提供的知识分享,特此总结知识点与案例,文章可联系作者后转载。后续我会更新更多好玩有趣的案例与知识点,欢迎关注收藏点赞。山水有相逢,我们下期再会~~