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     }

    最终显示的效果

  • 相关阅读:
    vsftpd匿名用户实验
    CentOS7 突然连不上网,报错"FailedtostartLSB:Bring up/down networking"
    搭建Java Web开发环境
    Starting named:[FAILED] named启动失败
    CentOS6克隆虚拟机报错Device eth0 does not seem to be present,delaying initialization.
    ADD requires at least two arguments
    mysql 5.7密码策略修改
    JavaScript手册
    vs编译生成之后报错
    vs编译生成之后报错
  • 原文地址:https://www.cnblogs.com/LO-ME/p/7346642.html
Copyright © 2011-2022 走看看