金沙国际官网_金沙国际平台登录

因为这个金沙国际官网_金沙国际平台登录网站与很多的大型澳门赌场都有合作,金沙国际官网_金沙国际平台登录尽职尽责,高效执行,保持好奇心,不断学习,追求卓越,点击进入金沙国际官网_金沙国际平台登录马上体验吧,所以现在也正式地开始了营业。

您的位置:金沙国际官网 > web前端 > 层叠上下文,针对易读性的背景滤镜兼容方案

层叠上下文,针对易读性的背景滤镜兼容方案

发布时间:2019-12-04 07:10编辑:web前端浏览(146)

    CSS 动画的 steps

    2015/09/28 · CSS · 动画

    本文作者: 伯乐在线 - risker 。未经作者许可,禁止转载!
    欢迎加入伯乐在线 专栏作者。

    animation默认以ease方式过渡,会以在每个关键帧之间插入补间动画,所以动画效果是连贯性的。easelinear等之类的过渡函数都会为其插入补间。但有些效果不需要补间,只需要关键帧之间的跳跃,这时应该使用steps过渡方式。本文后面有案例。

    层叠上下文 Stacking Context

    2015/09/02 · CSS · 层叠上下文

    原文出处: elcarim的博客   

    在CSS2.1规范中,每个盒模型的位置是三维的,分别是平面画布上的x轴,y轴以及表示层叠的z轴。对于每个html元素,都可以通过设置z-index属性来设置该元素在视觉渲染模型中的层叠顺序。

    z-index可以设置成三个值:

    • auto,默认值。当设置为auto的时候,当前元素的层叠级数是0,同时这个盒不会创建新的层级上下文(除非是根元素,即<html>);
    • <integer>。指示层叠级数,可以使负值,同时无论是什么值,都会创建一个新的层叠上下文;
    • inherit

    除了由根根元素创建的根层叠上下文以外,其它上下文是由z-index不为auto的“positioned”元素所创建。

    参考层叠级数,浏览器会根据以下规则来渲染绘制每个在同一个层叠上下文中的盒模型:
    (从先绘制到后绘制)

    1. 创建层叠上下文的元素的背景和边界;
    2. z-index为负值的子元素,数值越小越早被绘制;
    3. 同时满足“in-flow”、“non-inline-level”、“non-positioned”的后代元素;
    4. “non-positioned”的浮动元素
    5. 满足“in-flow”、“inline-level”、“non-positioned”的后代元素;
    6. 层叠级数为0的子层叠上下文以及“positioned”且层叠级数为0的后代元素;
    7. 层叠级数大于等于1的“positioned”子层叠上下文,数值越小越早被绘制;

    在规则中,提到了几种元素的修饰词,下面是简单的解释:

    • “positioned”指的是positionfixedabsoluterelative;那么如果未设置或为static的就是“non-positioned”元素;
    • “out-of-flow”元素指的浮动的或绝对定位(fixedabsolute)的元素,又或者是根元素;如果不是上述情况,那个这个元素就是“in-flow”
    • “inline-level”元素指的是displayinlineinline-tableinline-block的元素;

    规则有点多,但简单说,就是父元素会先绘制,接着是z-index为负值的子元素,然后是“non-positioned”元素,最后是按照层叠级数从0开始逐级绘制(这样说比较简单,省略了大量细节,因此并不是很准确)。如果层级相同,则按照元素在DOM树中的顺序来进行绘制。

    从这样看,要让z-index非负的元素按照层级控制生效,那么就将该元素设置为“positioned”,这也是许多文章中普遍提到的规则。

    下面,将利用MDN中的例子来分析和解释层叠上下文中的规则和计算方法,部分代码使用的MDN上的源码,另外一些是经过细微修改,目的是为了更好得把问题描述得更清楚。

    针对易读性的背景滤镜兼容方案(CSS filter 兼容方案)

    2016/05/26 · CSS · filter

    本文由 伯乐在线 - 涂鸦码龙 翻译。未经许可,禁止转载!
    英文出处:Taylor Hunt。欢迎加入翻译组。

    你知道现在有多火吗?用这种很大的,高质量的,支持 Retina 屏的模糊的 JPEG 图片作为 header 背景 :

    See the Pen Web site header, circa 2016 by Taylor Hunt (@tigt) on CodePen.

    潜在的问题是如果浏览器不支持滤镜 filter,文字将不可读 。这违背了可访问性的原则,再完美的视觉也无济于事。

    图片 1
    支持和不支持 filter 的效果对比

    因此呢,你需要提前准备好处理模糊的图片,可是设计师偏要你实现动态模糊呢,图片不固定,跟 Apple 的效果一样一样的,咋办?如果是用户上传的图片又咋办?嗯,你需要一台图片处理服务器,听起来成本很高。

    我碰巧想到一个妙招,让不支持 filter 的浏览器用颜色图层代替,方案并不完美,但是具有高可读性:

    图片 2
    不支持 filter 的效果

    steps用法

    简单地说,就是原本一个状态向另一个状态的过渡是平滑的,steps可以实现分布过渡。steps用法 :

    CSS

    steps(n,[start | end])

    1
    steps(n,[start | end])

    n是一个自然数,steps函数把动画分成n等份。

    • step-start 等同于 steps(1,start) ,动画分成 1 步,动画执行时以左侧端点为开始
    • step-end 等同于 steps(1,end) ,动画分成 1 步,动画执行时以结尾端点为开始

    没懂对不对?我也没懂,上面是官方的说法。接着往下看吧

    不设置z-index的层叠

    利用MDN上的一个例子来说明。

    为了方便比较,将源码简化成如下:

    XHTML

    <body> <div id="absdiv1">DIV #1</div> <div id="reldiv1">DIV #2</div> <div id="reldiv2">DIV #3</div> <div id="absdiv2">DIV #4</div> <div id="normdiv">DIV #5</div> </body>

    1
    2
    3
    4
    5
    6
    7
    <body>
    <div id="absdiv1">DIV #1</div>
    <div id="reldiv1">DIV #2</div>
    <div id="reldiv2">DIV #3</div>
    <div id="absdiv2">DIV #4</div>
    <div id="normdiv">DIV #5</div>
    </body>

    其中DIV#1DIV#4是粉色框,position设置为absolute

    DIV#2DIV#3是粉色框,position设置为relative

    DIV#5是黄色框,position为设置,默认static

    图片 3

    根据规则,由于DIV#5是“non-positioned”,即使DIV#5是DOM树中最后的元素,它也是最早被绘制的,因此它处于所有“positioned”的下面;而对于其余四个“positioned”的DIV,它们的绘制顺序就是按照在DOM树中的顺序绘制,即DIV#1->DIV#2->DIV#3->DIV#4

    尽管DIV#5是最“先绘制”的,但是浏览器在解析HTML的时候仍然是按照HTML文档流的顺序来解析的,实际的绘制顺序仍然是DIV#1->DIV#2->DIV#3->DIV#4->DIV#5。只不过,要绘DIV#5的时候,会对影响到的元素进行重新绘制,其渲染的效果看上去的顺序是DIV#5->DIV#1->DIV#2->DIV#3->DIV#4,将DIV#5提到了最前。

    基本实现

    我用伪元素作为背景,因为给元素加 filter 比单纯给背景加 filter 兼容性更好 。

    CSS

    .backdrop { position: relative } .backdrop::after { content: ""; /* 铺满整个父元素 */ position: absolute; top: 0; right: 0; bottom: 0; left: 0; /* 放到父元素内容的下层 */ z-index: -2; /* 像父元素一样展示背景 */ background: #222 url("inspirational-landscape-and/or-laughing-with-salad.jpg"); }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    .backdrop { position: relative }
    .backdrop::after {
      content: "";
     
      /* 铺满整个父元素 */
      position: absolute;
      top: 0; right: 0; bottom: 0; left: 0;
     
      /* 放到父元素内容的下层 */
      z-index: -2;
     
      /* 像父元素一样展示背景 */
      background: #222 url("inspirational-landscape-and/or-laughing-with-salad.jpg");
    }

    辨析steps

    可以在demo中查看step的区别:狠狠地戳下去

    steps(4,start)steps(1,start) 的最大区别就是每次动画”跳跃”的时候,即从 0% -> 25% 的时候,steps(1) 直接一步到位,瞬间从0%的状态跳到25%的状态,而steps(4)会逐渐走4步,即从 0% -> 25% 要跳 4 步 !

    慢慢体会一下,应该就知道steps的作用了吧

    float的层叠

    同样是要MDN上面的例子来说明。

    JavaScript

    <body> <div id="absdiv1"> <br /><span class="bold">DIV #1</span> <br />position: absolute; </div> <div id="flodiv1"> <br /><span class="bold">DIV #2</span> <br />float: left; </div> <div id="flodiv2"> <br /><span class="bold">DIV #3</span> <br />float: right; </div> <br /> <div id="normdiv"> <br /><span class="bold">DIV #4</span> <br />no positioning </div> <div id="absdiv2"> <br /><span class="bold">DIV #5</span> <br />position: absolute; </div> </body>

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    <body>
    <div id="absdiv1">
            <br /><span class="bold">DIV #1</span>
            <br />position: absolute;
        </div>
     
        <div id="flodiv1">
            <br /><span class="bold">DIV #2</span>
            <br />float: left;
        </div>
     
        <div id="flodiv2">
            <br /><span class="bold">DIV #3</span>
            <br />float: right;
        </div>
     
        <br />
     
        <div id="normdiv">
            <br /><span class="bold">DIV #4</span>
            <br />no positioning
        </div>
     
        <div id="absdiv2">
            <br /><span class="bold">DIV #5</span>
            <br />position: absolute;
        </div>
    </body>

     

    其中DIV#1DIV#5是粉色框,position设置为absolute

    DIV#1DIV#2是粉色框,float设置分别为leftrightopacity是1;

    DIV#4是黄色框,position为设置,默认static

    图片 4

    上一节的例子类似,由于DIV#4是“non-positioned”,所以DIV#4仍然是最先绘制的,因此它的背景和边界将在所有元素的最下面。而且根据规则,DIV#4中的inline-level元素()会在浮动元素绘制以后才绘制,结果是被挤到了DIV#2的右边。

    根据规则,浮动元素是在“positioned”元素之前绘制,因此DIV#1DIV#5会在两个浮动元素的上面。

    要注意到,在这里几个<div>的并没有设置透明度,这跟MDN上的源码有所区别。那现在,如果完全按照MDN的源码,将DIV#1DIV#2DIV#3DIV#5opacity设置为0.7,显示结果如下:

    图片 5

    仔细观察,可以发现,在设置了opacity后,DIV#3的层级被提高到了DIV#1之上了。这与CSS2.1上的规定有所区别。

    如果对DIV#4设置opacity:0.99,结果更加出人意料:

    图片 6

    原本在最下面的DIV#4跑到了更加前面的位置,只位于DIV#5之下。

    由于opacity并不是在CSS2.1里规定,需要使用CSS3中新的规则来解释这一个现象,更容易理解z-index的规则,现在暂时不讨论opacity所带来的影响,避免把规则变得更复杂。

    加特效

    此时,设计师发话了,让背景图模糊一下,再来个轻微变暗效果就更好了。

    JavaScript

    /* 不要忘记前缀,Safari >9.1 和所有 Chrome 仍然需要 -webkit- */ filter: blur(4px) brightness(75%);

    1
    2
    /* 不要忘记前缀,Safari >9.1 和所有 Chrome 仍然需要 -webkit- */
    filter: blur(4px) brightness(75%);

    这么做还远远不够,不支持 filter 的浏览器将严重影响阅读。

    案例 – 控制台效果

    先戳 demo

    这里就是steps(1,start) ,动画又是只有 0%(100%) 、 50% 两个状态,所以直接一步跳跃,直接走完。

    你可以改成steps(4),就更能知道steps的作用了

    设置了z-index的层叠

    再次使用MDN中的例子:

    XHTML

    <body> <div id="absdiv1">DIV #1</div> <div id="reldiv1">DIV #2</div> <div id="reldiv2">DIV #3</div> <div id="absdiv2">DIV #4</div> <div id="normdiv">DIV #5</div> </div>

    1
    2
    3
    4
    5
    6
    7
    <body>
        <div id="absdiv1">DIV #1</div>
        <div id="reldiv1">DIV #2</div>
        <div id="reldiv2">DIV #3</div>
        <div id="absdiv2">DIV #4</div>
        <div id="normdiv">DIV #5</div>
    </div>

     

    为了让结构更加清楚,简化了HTML源码,下面是每个<div>的属性设置:

    • DIV#1position: absolutez-index: 5
    • DIV#2position: relativez-index: 3
    • DIV#3position: relativez-index: 2
    • DIV#4position: absolutez-index: 1
    • DIV#5position: staticz-index: 8
    • 图片 7
    • 又见到了可怜的DIV#5,尽管它的z-index:8是所有元素中最大的,但由于它是“non-posititoned”所以,它在层叠上还是地位低下,仍然要老老实实呆在其他元素的下面。

      而对于其他“positioned”元素,它们的绘制顺序就是按照z-index的大小来加以分别,因此尽管DIV#1在DOM树中是最靠前的,但由于它的z-index: 5比其他都大,因此就成了最顶层的元素了。

      层叠上下文

      首先,回忆一下,创造层叠上下文的两种情况:

      • 根元素,创建根层叠上下文;
      • z-index不为autopositioned元素;

      ### 实例一(同一层叠上下文中的时代)

      继续使用MDN上的例子,来说明如果层叠上下文对z-index计算的影响。

    XHTML
    
    &lt;body&gt; &lt;div id="div1"&gt; &lt;div id="div2"&gt;&lt;/div&gt;
    &lt;/div&gt; &lt;div id="div3"&gt; &lt;div id="div4"&gt;&lt;/div&gt;
    &lt;/div&gt; &lt;/body&gt;
    
    <table>
    <colgroup>
    <col style="width: 50%" />
    <col style="width: 50%" />
    </colgroup>
    <tbody>
    <tr class="odd">
    <td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
    <div class="crayon-num" data-line="crayon-5b8f6938563cb085489625-1">
    1
    </div>
    <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6938563cb085489625-2">
    2
    </div>
    <div class="crayon-num" data-line="crayon-5b8f6938563cb085489625-3">
    3
    </div>
    <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6938563cb085489625-4">
    4
    </div>
    <div class="crayon-num" data-line="crayon-5b8f6938563cb085489625-5">
    5
    </div>
    <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6938563cb085489625-6">
    6
    </div>
    <div class="crayon-num" data-line="crayon-5b8f6938563cb085489625-7">
    7
    </div>
    <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6938563cb085489625-8">
    8
    </div>
    <div class="crayon-num" data-line="crayon-5b8f6938563cb085489625-9">
    9
    </div>
    </div></td>
    <td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
    <div id="crayon-5b8f6938563cb085489625-1" class="crayon-line">
    &lt;body&gt;
    </div>
    <div id="crayon-5b8f6938563cb085489625-2" class="crayon-line crayon-striped-line">
     &lt;div id=&quot;div1&quot;&gt;
    </div>
    <div id="crayon-5b8f6938563cb085489625-3" class="crayon-line">
        &lt;div id=&quot;div2&quot;&gt;&lt;/div&gt;
    </div>
    <div id="crayon-5b8f6938563cb085489625-4" class="crayon-line crayon-striped-line">
     &lt;/div&gt;
    </div>
    <div id="crayon-5b8f6938563cb085489625-5" class="crayon-line">
     
    </div>
    <div id="crayon-5b8f6938563cb085489625-6" class="crayon-line crayon-striped-line">
     &lt;div id=&quot;div3&quot;&gt;
    </div>
    <div id="crayon-5b8f6938563cb085489625-7" class="crayon-line">
        &lt;div id=&quot;div4&quot;&gt;&lt;/div&gt;
    </div>
    <div id="crayon-5b8f6938563cb085489625-8" class="crayon-line crayon-striped-line">
     &lt;/div&gt;
    </div>
    <div id="crayon-5b8f6938563cb085489625-9" class="crayon-line">
    &lt;/body&gt;
    </div>
    </div></td>
    </tr>
    </tbody>
    </table>
    
    免去其他杂乱的样式和显示,HTML的主体结构如上所示,其中的属性设置如下:
    
    -   `DIV#1`:`position: relative`;
        -   `DIV#2`:`position: absolute`, `z-index: 1`;
    -   `DIV#3`:`position: relative`;
        -   `DIV#4`:`posititon: absolute`;
    
    从代码就可以推断出,除了根元素创建的根层叠上下文以外,还有`DIV#2`所创建的层叠上下文。因此,尽管`DIV#2`与`DIV#3`或`DIV#4`都不在一个BFC(块格式化上下文)中,但它们都同处于一个层叠上下文中,因此根据层叠规则,`DIV#2`的`z-index`最高,因此处于另外三个元素之上。
    
    显示的结果则如下图:
    

    图片 8

     

    当然,如果将DIV#4设置z-index: 2,那么DIV#4就会跑到最顶部:

    图片 9

    从此可以得知,层叠计算时,将考虑同一个层叠上下文中的所有元素而不考虑元素是否有其他联系。

    上妙招

    是否听过 filter 有 opacity() 效果 ?对比广泛支持的 opacity 属性,它显得有点鸡肋,但是它的存在才使得兼容方案得以实现:

    JavaScript

    .backdrop::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; /* 把它放到其它伪元素的上面,但是仍在父元素内容的下面 */ z-index: -1; /* 让遮罩层足够的暗,无论什么背景都可以看清楚上面的文字 */ background: rbgba(0,0,0, 0.5); /* 使用滤镜完全隐藏它?? */ filter: opacity(0%); }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    .backdrop::before {
      content: "";
      position: absolute;
      top: 0; right: 0; bottom: 0; left: 0;
     
      /* 把它放到其它伪元素的上面,但是仍在父元素内容的下面 */
      z-index: -1;
     
      /* 让遮罩层足够的暗,无论什么背景都可以看清楚上面的文字 */
      background: rbgba(0,0,0, 0.5);
     
      /* 使用滤镜完全隐藏它?? */
      filter: opacity(0%);
    }

    如果支持 filter 滤镜,带图片的伪元素是模糊的,微微变暗的,这一黑色的遮罩层是完全透明的。如果不支持滤镜呢,显示效果并不完美,但是不会阻碍任何人阅读上面的文字。

    CodePen 的例子在此,希望你喜欢:

    See the Pen Filtered background with fallback for legibility by Taylor Hunt (@tigt) on CodePen.

    其它 filter 滤镜的使用或许也能受此启发,我把它放到了我的锦囊里。

    本文由金沙国际官网发布于web前端,转载请注明出处:层叠上下文,针对易读性的背景滤镜兼容方案

    关键词:

上一篇:CSS单词换行and断词,CSS3硬件加速也有坑

下一篇:没有了