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>
实现效果：
