CSS3为情况图设定蒙版并处理蒙版款式●▂●承继

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

关键词:如何织梦建站,如何创建网站,网站建立,公众号搭建,网站建站的

工作中中许多情况下必须对照片情况作解决,例如设定透亮性,模糊不清解决这些

可是假如对情况图所属标识立即设定这种实际效果得话,这种款式会褥子标识承继。

例1: 给情况所属标识设定模糊不清实际效果,危害来到子标识内的文本

   <style>
        .parent{
            background: url('./test.jpg') no-repeat center;
            filter: blur(3px)
        }
        .son{
            filter: blur(0);
            /*
            在子标识下设置同样特性也没法遮盖承继来的款式
            */
        }
    </style>

    <div class="parent">
        <p class="son">Hello</p>
    </div>

处理方式:

为父标识中加上一个标识,令其肯定精准定位并铺满父标识,将情况 / 款式设定在该标识内。

   <style>
        .parent{
            position: relative;
            /*让父标识相对性精准定位,使.middle相对性自身精准定位*/
        }
        .middle{
            background: url('./test.jpg') no-repeat center;
            filter: blur(3px);

            position: absolute;
            height: 100%;
            width: 100%;
            
            z-index: -1;
            /*减少涂层高宽比,避免遮住别的子原素*/
        }
        .son{
        }
    </style>
    
    <div class="parent">
        <div class="middle"></div>
        <p class="son">Hello</p>
    </div>

到此这篇有关CSS3为情况图设定蒙版并处理蒙版款式承继难题的文章内容就详细介绍到这了,大量有关CSS3情况图蒙版內容请检索脚本制作之家之前的文章内容或再次访问下边的有关文章内容,期待大伙儿之后多多的适用脚本制作之家!

上一篇:CSS届的制图板CSS●▂● Paint API介绍 返回下一篇:没有了