簡單說 CSS中的mask—好好利用mask-image

時間 2019-11-08

標籤簡單 css mask 好好利用 image 欄目 CSS 简体版

原文原文鏈接

說明

CSS中的mask屬性容許用戶屏蔽或剪裁特定點的圖像來實現，部分或徹底隱藏某個元素的可見性。
好吧，這個概念可能有點很差理解，先看圖。 css

看了這個等式，彷佛明白點什麼了吧，朋友們，第一張圖就是一張普通的圖，第二張圖，黑色部分是不透明的，白色部分是透明的，用上mask以後，兩張圖重疊，黑色區域中的會顯示出來，白色區域不顯示。 html

用過ps的朋友，應該很清楚，蒙版這東西，這就和蒙版很像，好吧，沒用過ps的朋友，又要問蒙版是什麼了，相信看完這篇文章，你應該連蒙版也知道了。 css3

mask和background用法是相仿的，mask的值有這些web

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

具體細節參考這裏：
CSS background 屬性
 CSS mask 屬性瀏覽器

解釋

因爲目前，只有webkit內核的瀏覽器支持mask屬性，因此考慮到兼容性的話，用mask屬性的時候仍是要想一想的。 url

今天咱們主要說說 mask-image，這個比較有意思，這兩個單詞翻譯過來就是，面具圖片，的確很形象，真的就像是給元素帶上一個面具同樣。
咱們直接上代碼，把上面提到那個等式，實現一下，順便說一句，mask-image 和 background-image 同樣，不只能夠取值是圖片路徑，也能夠是漸變色。spa

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">

  <style>
    .mask{
        width:475px;
        height:260px;
        background-image:url("http://img.blog.csdn.net/20170701221659356");

        /* 取值是圖片路徑 */
        -webkit-mask-image:url("http://img.blog.csdn.net/20170701221732018");
    }
  </style>
 </head>
 <body>
    <div class="mask"> </div>
 </body>

</html>

background-image .net

-webkit-mask-image ssr

效果圖 翻譯

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">

  <style>
    .mask{
        width:475px;
        height:260px;
        background-image:url("http://img.blog.csdn.net/20170701221659356");

        /* 取值是漸變色 */
        -webkit-mask-image:linear-gradient(blue, transparent);
    }
  </style>
 </head>
 <body>
    <div class="mask"> </div>
 </body>

</html>

效果圖

我再善意的提醒下，-webkit-mask-image 的值應該是一張，背景是透明色的圖，或者說有透明色，而透明色的區域，最後都是不顯示的。

下面是mask 和 animation 配合完成的一個效果
效果圖

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">

  <style>
     @keyframes mask{
        0% {-webkit-mask-position:0px 0px;}
        25% {-webkit-mask-position:619px 0px;}
        50% {-webkit-mask-position:0px 0px;}
        75% {-webkit-mask-position:308px 0px;-webkit-mask-size:100%;}
        100% {-webkit-mask-size:1000%;}
     }

    .mask{
        width:700px;
        height:392px;
        background:black url("http://www.kkkk1000.com/images/1534750163.jpg");
        -webkit-mask-image:url("http://www.kkkk1000.com/images/1534750222.jpg");
        animation:mask 5s linear infinite forwards;
    }
  </style>
 </head>
 <body>
    <div class="mask"> </div>
 </body>

</html>