zoukankan      html  css  js  c++  java
  • 如何让父元素有透明度,但里面的子元素不透明

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

    最终显示的效果

  • 相关阅读:
    ant build 报 warning modified in the future
    JQUERY选择器大全(转载)
    MAVEN实践经验
    Jquery ajax参数设置(转)
    解决WIN7下pl/sql连接弹出空白提示框问题
    getContextPath、getServletPath、getRequestURI的区别
    HTTP协议
    构建接口层快速稳定的质量保证体系
    接口测试流程
    接口测试的意义
  • 原文地址:https://www.cnblogs.com/LO-ME/p/7346642.html
Copyright © 2011-2022 走看看