方法1：使用透明的图片
将父元素的背景颜色透明，然后使用一张带透明的背景图片覆盖整个区块，然后再这个区块中添加的子元素就不会透明
方法2：背景色透明 rgba来代替opacity
css3中新增了一种颜色表示方法，就是rgba，前面三个参数表示颜色，第四个参数表示透明度
完全可以用背景色透明 rgba来代替opacity，opacity这个属性指定的透明是包括里面的元素的，不可能只有外面透明，里面不透明，如果使用opacity这个属性，那么所有子孙元素都会有透明的效果
HTML结构：
1 <body> 2 <div class="contain"> 3 <div class="child"> 4 <p>如何让父元素有透明度，但里面的子元素不透明</p> 5 </div> 6 </div> 7 </body>
css样式代码：
1 *{ 2 padding: 0; 3 margin: 0; 4 } 5 html,body{ 6 width: 100%; 7 height: 100%; 8 background-color: red; 9 } 10 .contain{ 11 width: 80%; 12 height: 80%; 13 background-color: rgba(0, 0, 0, 0.2); 14 position: absolute; 15 left: 50%; 16 top:50%; 17 transform: translate(-50%,-50%); 18 } 19 .child{ 20 background-color: blue; 21 width: 50%; 22 height: 50%; 23 position: absolute; 24 left: 50%; 25 top:50%; 26 transform: translate(-50%,-50%); 27 } 28 .child p{ 29 text-align: center; 30 color: #FFFFFF; 31 width: 100%; 32 height: 100px; 33 position: absolute; 34 left: 50%; 35 top:50%; 36 transform: translate(-50%,-50%); 37 line-height: 100px; 38 }
最终显示的效果
