如何让父元素有透明度，但里面的子元素不透明

方法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     }

最终显示的效果

 

posted @ 2017-08-11 16:35  胡椒粉hjf  阅读(2160)  评论(0)  编辑  收藏  举报