1. <output id="hzk7v"><pre id="hzk7v"><address id="hzk7v"></address></pre></output>
      <output id="hzk7v"></output>
    2. <nav id="hzk7v"><i id="hzk7v"><em id="hzk7v"></em></i></nav>
    3. <listing id="hzk7v"><delect id="hzk7v"><em id="hzk7v"></em></delect></listing>

      用纯CSS实现镂空效果的示例代码

        发布时间2019-02-25 15:24:43   作者基恩士   我要评论

      这篇文章主要介绍了用纯CSS实现镂空效果的示例代码的相关资料小编觉得挺不错的现在分享给大家也给大家做个参考一起跟随小编过?#32431;纯?#21543;

      近来研究了一下镂空效果

      background-clip: text

      背景被裁剪为文字的前?#21543;?#31532;一次是在 CSS-Tricks 看到的这个用法: 在 CSS-Tricks 网站上这个玩意用得到处都是

      这样做简单的?#35745;?#32972;景镂空效果便不再困难了关键代码只有几?#23567;?/p>

      .wrapper {
        /* ... */
        background-image: url("/path/to/your/image");
        background-clip: text; /* ! */
        color: transparent;    /* ! */
      }

      就这几行视觉上会就会有大变化前后对比

      另外这里有个比上面更实用的Demo

      background-clip 既然是“background”家族的那它天生和?#35745;?#28176;变打的交道多不过我们做镂空总不会都是?#35745;?#28176;变这种吧如果我们想做视频文字甚至更复杂的 DOM 元素的镂空效果呢

      单刀直入 CSS mask 属性

      这应该是最直接能想到的方法了毕竟名字里就带个“mask”谁能忽略呢

      CSS mask-* 系列属性是在 CSS Masking Module Level 1 中定义的这个规范也定义了为很多人熟知的 clipclip-path 属性换句话说这个CSS 模块包括遮罩和剪裁两部分

      第一个例子

      虽然是一个新的属性但设置 mask 属性并不难下面就是我们的第一个例子

      <div class="masked" />
      .masked {
        height: 100px;
        width: 100px;
        background: linear-gradient(red, orange, yellow, lightgreen, blue, purple, red);
        mask: url("https://github.githubassets.com/pinned-octocat.svg");
      }

      就是下面的效果啦

      上面的用法还是很简单的我们指定了一个 mask 参数它的值是一张 从GitHub盗的 SVG?#35745;?#20110;是多?#23454;?#28176;变就被 裁剪 遮罩成了那只著名的猫

      mask-* 大家族

      mask 属性实际上是诸多 mask-* 的缩写:

      mask-image
      mask-repeat
      mask-position
      mask-clip
      mask-origin
      mask-size
      -
      mask-type
      mask-composite
      mask-mode

      有没有 background-* 的?#35789;?#24863;没错里面的不少属性都是和 backgorund / border 一致的而且它们的作用也是一致的只不过 background-* 用在背?#21543;希?#32780; mask-* 用在遮罩层上而已——用在背?#21543;?#30340;奇?#23478;?#24039;搬到 mask 的世界里还能接着用比如实现这样的效果

      .masked {
        height: /* ... */;
        width: /* ... */;
        background: /* ... */;
        mask-image: url(https://github.githubassets.com/pinned-octocat.svg);
        mask-size: 5em;
        mask-position: center;
        /* 如果你心情好加个动画也没问题的 */
      }

      进一步控制遮罩效果

      可能读者已经发现了 mask-* 家族里有几张生面孔这也好理解 mask 这么强大的特性完完全全地抄 background-* 岂不?#19978;?#20102;

      mask-mode

      mask-mode 用来指定具体的遮罩方式

      mask-type CSS 属性设置 mask-image 被用于“亮度型”的遮?#21482;?#26159;“不?#35813;?#24230;”型的遮罩 mask-mode: alaph 表示使用不?#35813;?#24230;即alaph通道作为 mask value mask-mode: luminance 表示使用亮度值作为 mask value

      那遮?#31181;?/ mask value 又是?#35009;mask value 表示被遮罩的元素被遮罩的程度mask value 越大被遮罩区域会更偏向于显露mask value 最大的时候那个区域就完全不?#35813;?#20102;举个例子

      <div class="mode">ABCDEFG</div>
      .mode {
        height: 200px;
        width: 300px;
        /* and more */
        mask-image: linear-gradient(to left, black, yellow);
        mask-mode: luminance; /* or alaph ? */
      }

      左边是遮罩?#35745;?#20013;间是 luminance 右边使用 alaph 这里的?#35745;?#26159;不?#35813;?#30340;所?#36234;?#19968;个恒不?#35813;?#30340;?#35745;?#22312; alaph 模式下作为遮罩其结果是没有遮罩效果但是?#35745;?#26159;有亮度变化的所以 luminance 下的被遮罩元素?#32479;?#29616;出?#35813;?#24230;的变化了

      一般 luminance 模式慢一点点因为每一个像素点的亮度值需要根据 RGB 三个通道的?#23548;?#31639;出来

      mask-composite

      指定当有多个遮罩?#35745;?#21472;加起来的时候如何处理遮罩效果一些属性值的效果依赖于 mask-image 的层级次序

      MDN 提供的这个 CodePen 来感受一下

      关于 mask 的知识就讲到这里更具体更?#26082;?#30340;?#24471;?#36824;是 要到 MDN 看一看

      混合模式

      这应该是最为神奇的一种方法了使用PS的时候经常会看见“混合模式”这个词还记得多年前?#39029;?#27425;使用 Photoshop 的时候还很好奇“混合模式”是?#35009;?#19996;西顿时让我对 Photoshop 充满了?#27425;?#20043;情不过当年的?#27425;?#24402;?#27425;P?#29616;在这里说的“混合模式”还是蛮好理解的

      所谓的“混合模式”是指当一种当层重叠时计算像素最终颜色值的方法每?#21482;?#21512;模式接收前景颜色值和背景颜色值分别为顶部颜色和底部颜色作为输入执行一些计算并输出最后要显示在屏幕上的颜色值最终的可见的颜色是对层中的每个重叠像素执行混合模式计算所得的结果 说白了混合模式确定了把一层叠加到另一层上去会得到?#35009;?#32467;果

      在 CSS 中可以使用 mix-blend-mode 来指定混合模式

      你可能会问了平时也没有用?#35009;?ldquo;混合模式”这种东西所以 blend-mode 的默?#29616;?#26159; none 吗可不是其实这种最常见的 上层把下层“遮住”了的情况也属于一?#21482;?#21512;模式叫 normal 它本质上是一种只保留前景颜色?#20992;?#23436;全抛弃背景颜色值的混合模式

      这?#38210;?#20204;只讨论实现镂空效果用到的混合模式 —— screen 这?#21482;?#21512;模式有一个特性前?#23433;?#26159;黑色导致最终可见的颜色直接是背?#23433;?#30340;颜色前?#23433;`前?#33394;导致最终可见的颜色直接?#21069;?#33394;

      相信你已经搞不明白这和镂空有?#35009;?#20851;系了下面举个例子看一下

      现在我们有一个 <video> 以及一个“白底黑字”的Logo浮层

      我们在浮层框上加上下面的 CSS

      .logo {
          /* ... ... */
          mix-blend-mode: screen;
      }

      就变成了下面的样子

       

      去这个 Demo看具体代码和效果

      齿轮图标确实是变为镂空的了不过为?#35009;?#21602;

      先来明确一件事把浮层置于视频之上浮层是“前景”视频是“背景”先?#32431;?#28014;层的白色部分因为把白色置于任何颜色之上都得到白色所以白色部分被保留而因为黑色置于任何颜色之上都得到下层的颜色所以黑色部分呈现镂空效果

      但是这样的实现比较 Hack因为这里只使用了黑白两色如果使用其它的颜色作为浮层的 background-color 得到的就不会像是镂空的效果了这时还是得请上面的 mask 家族出场不过单单对于白底的情况 mix-blend-mode 不失为一个可行的解法

      以上就是本文的全部内容希望对大家的学习有所帮助也希望大家多多支持脚本之家

      相关文章

      最新评论

      3dԻв

        1. <output id="hzk7v"><pre id="hzk7v"><address id="hzk7v"></address></pre></output>
          <output id="hzk7v"></output>
        2. <nav id="hzk7v"><i id="hzk7v"><em id="hzk7v"></em></i></nav>
        3. <listing id="hzk7v"><delect id="hzk7v"><em id="hzk7v"></em></delect></listing>

            1. <output id="hzk7v"><pre id="hzk7v"><address id="hzk7v"></address></pre></output>
              <output id="hzk7v"></output>
            2. <nav id="hzk7v"><i id="hzk7v"><em id="hzk7v"></em></i></nav>
            3. <listing id="hzk7v"><delect id="hzk7v"><em id="hzk7v"></em></delect></listing>