CSS中如何制作背景半透明但内容不透明的效果
一、利用伪元素:before
添加一个半透明的背景,并利用position
定位属性,设置z-index值为-1,显示在下层。
css:
<style>.box:before{width: 500px;height: 300px;border: 1px solid gray;background:url(../sucai/1.jpg);background-size: 500px 300px;/*opacity设置半透明效果*/opacity: 0.5;/* content和:before搭配使用 */content:"";/* 使用绝对定位,z-index=-1设置为下层显示 */position: absolute;z-index: -1;<style>
html:
<body><div class="box"><p>利用伪元素:before添加一个半透明的背景</p></div></body>
效果实现:可以看到p
标签里面的文字不透明,而背景透明。
————————————————————————————————————————————
二、在外层div
里设置背景,内层div
利用rgba
设置一个半透明的纯色背景,可以实现一样的半透明背景图片的效果。
<style>.box1{width: 500px;height: 300px;background: url(../sucai/1.jpg);background-size: 500px 300px;}.box2{width: 500px;height: 300px;/* 利用rgba设置一个纯白色半透明背景 */background: rgba(255, 255, 255, 0.5);}</style>
<body><div class="box1"><div class="box2"><p>外层div设置背景,内层div设置纯色半透明背景。</p></div></div></body>
实现效果: