CSS中opacity透明继承问题的解决方案

最新推荐文章于 2024-02-02 19:25:51 发布

weixin_34378045

最新推荐文章于 2024-02-02 19:25:51 发布

阅读量275

点赞数

CC 4.0 BY-SA版权

文章标签： python

原文链接：https://my.oschina.net/xiangduole8/blog/291146

2019独角兽企业重金招聘Python工程师标准>>>

<head>
<style type="text/css">
    .touming{         /* 类选择器前面要用"." */
       height:200px;   /* 宽200像素 */
       width:200px;   /* 高200像素 */
       background-color: red; /* 背景颜色，为了方便我这里设置的是红色 */
       opacity:0.5;    /* 0.5代表的透明的程度，可以自行决定  */
    }
</style> 
</head>
<body>
   <div class="touming">   /* 我这里定义一个类 */
        <span>1234</span> 
   </div>
</body>
/*
    如果只想让div透明，但是又不想让span里面的字也跟着透明，唯一也是最简单的解决方法只有用一个大的块，也就是div，包住里面两个元素，把里面的span也用一个块包住，让span的块和需要透明的块变成同级元素，就不会有继承的影响，方法如下   
*/
<head>
<style type="text/css">
    .touming{         /* 类选择器前面要用"." */ 
      height:200px;   /* 宽200像素 */
       width:200px;   /* 高200像素 */
       background-color: red;   /* 背景颜色，为了方便我这里设置的是红色 */
       opacity:0.5;    /*  0.5代表的透明的程度，可以自行决定  */ 
   }
</style> 
</head>
<body>
<div>
   <div class="touming"></div>   /* 我这里定义一个类 */
    <div><span>1234</span></div> /* 这里的div包住span，让span与需要透明的块变成同级，这样可能span会在上一个透明的div下面，可以用定位把span里面的字定上去 */
</body>

转载于:https://my.oschina.net/xiangduole8/blog/291146