直播电商软件开发,css透明度的两种不同形式实现的相关代码
有时候,我们在css设置透明度来实现特殊的效果。css中有两种透明度方式:opacity和rgba,那么两者又有什么区别呢?
opacity
<style> /* opacity设置透明度,会给父元素里的所有子元素也设置 */ #box { width: 200px; height: 200px; position: relative; margin: auto; background-color: red; opacity: 0.5; } #content { width: 100px; height: 100px; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; line-height: 100px; text-align: center; } </style> <div id="box"> <div id="content">这是内容</div> </div>
rgba
<style> /* rgba只能给颜色设置透明度,并且不会影响到子元素 */ #box { width: 200px; height: 200px; position: relative; margin: auto; background-color: rgba(0, 0, 0, 0.3) } #content { width: 100px; height: 100px; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; line-height: 100px; text-align: center; } </style> <div id="box"> <div id="content">这是内容</div> </div>
rgba设置的透明度则不能被子元素给继承。
以上就是 直播电商软件开发,css透明度的两种不同形式实现的相关代码,更多内容欢迎关注之后的文章