详细说明✤CSS

日期:2021-03-23 类型:科技新闻 

关键词:h5互动游戏,微信h5怎么制作,h5转盘抽奖,h5测试制作,凡科H5

在写新项目网页页面的全过程中,碰到子原素承继父原素全透明度的难题,搜索了许多文本文档得出的全是第一种方式,这类方式关键处理简易情景的,而针对设定繁杂的background时,该方式已不可用。

剖析缘故:

父原素情况色调设定全透明度opacity:0.5,子原素会承继,给子原素设定opacity:1,子原素的全透明度也是在父原素0.5的基本上设定的。

第一种方式:

父原素情况色调设定全透明度时,防止应用background:#000;opacity:0.5,提议应用background:rgba(0,0,0,0.5)

第二种方式:

假如设定情况色为渐变色色等这类繁杂情况,第一种方式也不在可用。
 

background-image: linear-gradient(-180deg, rgba(20,20,20,0.00) 19%, #303030 100%);
opacity: 0.5;

由于子原素会承继父原素的opacity特性,大家让它不了为子原素。增加一身高原素,将其肯定精准定位到父原素部位,随后在该原素上设定情况色与全透明度。

<div class="container">
    <div class="content">
        <p>我是class为content的DIV</p>
        <p>我的情况是class为background的情况</p>
        <p>根据相对性精准定位和肯定精准定位,我将class为background的DIV移动来到我的部位。</p>
        <p>同时根据我的很大的z-index浮在了它的上边。 :)</p>
    </div>
    <div class="background"></div>
</div>
.container {
    width: 300px;
    height: 250px;
    color: #fff;
    position:relative;
}
.content {
    position:relative;
    z-index:5;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.background {
    background-color: #37a7d7;
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    z-index:1;
    /*适配IE7、8 */
       -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=50);
    opacity:.5;
}

参照:https://www.cnblogs.com/liu-l/p/3890861.html

到此这篇有关详细说明CSS-opacity子原素承继父原素全透明度的处理方式的文章内容就详细介绍到这了,大量有关CSS-opacity子原素承继父原素全透明度內容请检索脚本制作之家之前的文章内容或再次访问下边的有关文章内容,期待大伙儿之后多多的适用脚本制作之家!