這是我參與8月更文挑戰的第12天，活動詳情查看：8月更文挑戰web

讀不在三更五鼓，功只怕一曝十寒。markdown

看完以爲有收穫的，點個讚唄！！！app

前言

在前面兩篇文章，咱們介紹了背景圖片，以及背景圖片的裁剪、位置、尺寸、起始位置等等屬性，相信經過前兩章大概能夠窺得CSS天機了吧。本文咱們開始介紹其餘關於圖片的屬性！svg

mask-image

從名稱上面面具-圖片，大概就知道這個屬性是幹嗎的，屬性值是啥了。用於設置元素上遮罩層的圖像，能夠放在全部元素上，甚至包括svg。post

不知道有沒有用過PS，在PS中有一個叫作蒙版的東西，蒙版是一種灰度圖像。用黑色繪製的區域將隱藏，用白色繪製的區域將可見，而用灰度繪製的區域將以不一樣級別的透明度出現。學習

mask-image和這個蒙版差很少，不一樣的是，mask-image是不透明的地方顯示，透明的地方不顯示。就像是你拿一張黑紙放在電腦屏幕上，你只能看到黑紙所在區域的電腦畫面，其餘的地方看不到，解釋道這裏，相信應該明白了，若是不明白就經過下面的例子來理解吧。動畫

兼容性

目前來看兼容性仍是不錯的！ ui

mask-image

屬性值

none;

沒有圖片，設置了這個屬性，其餘的mask-* 屬性天然沒有用處了

url(jpg/png/svg);

這裏咱們看一下svg的效果首先再阿里iconfont上覆制一個svg 保存爲mk.svg

而後來使用它：

#masked {
  width: 200px;
  height: 200px;
  background-color: #8cffa0;
  -webkit-mask-image: url(./mk.svg);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-origin:content-box;
  border: 10px solid #000;
}

<div id="masked"></div>
複製代碼

這裏咱們開始來分析：

首先：你們看到的淡黃色的邊框是鼠標審查元素看到的，真正的是下面這樣，並無邊框的

首先咱們定義了背景顏色，淡綠色，mask是上面的svg，mask的起始位置是內容區域，最後定義了一個邊框，最後從效果圖中咱們能夠得出一下結論

1. mask-image 是對整個元素生效的（包括border）

2. mask-image 是mask透明背景顯示，mask不透明背景看不見

3. 咱們是沒法看到mask自己的內容的，只能看到背景的內容。

漸變

-webkit-mask-image: linear-gradient(rgba(0, 0, 0, 1.0), transparent 50%);

mask-image: linear-gradient(rgba(0, 0, 0, 1.0), transparent);

image(url(mask.png), skyblue);

在最新版的谷歌和火狐中均沒法識別。

有趣的例子-聚光燈

效果以下：

實現邏輯：

首先是一張做爲背景圖片的人物照

一個黑色的圖片做爲mask

使用動畫來控制黑色mask的位置，就能夠實現

<style>
      @keyframes mask{
        0% {-webkit-mask-position:0px 60px;}
        15% { -webkit-mask-position:55px 50px;}
        30% {-webkit-mask-position:117px 0px;}
        45% { -webkit-mask-position:110px 110px; -webkit-mask-size:85px 85px;}
        60% { -webkit-mask-position: 173px 8px;-webkit-mask-size: 86px 85px;}
        75% { -webkit-mask-position: 193px 110px;-webkit-mask-size: 80px 80px;}
        90% {-webkit-mask-position: 270px 80px;-webkit-mask-size: 90px 65px;}
        100% {-webkit-mask-size:1000%;}
     }
      .mask {
        width: 300px;
        height: 200px;
        background: url(./哆啦a夢.png);
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-image: url("./black.png");
        -webkit-mask-size:60px 70px;
        animation: mask 5s linear infinite forwards;
      }
    </style>
  </head>
  <body>
    <div class="mask"></div>
  </body>
複製代碼

附上照片，能夠本身本地跑跑試試。

總結

經過幾個小例子，相信你對mask-image,屬性應該是很熟悉了，對於文章中提到的一些屬性，文章雖然沒有講解，可是也是很重要的，要學起來！！！能夠去看我以前background-image屬性的文章，大體是同樣的。原本這篇文章是要做爲圖片的最後一篇的，奈何mask-image很複雜，因此剩餘沒介紹的圖片屬性，只能放在下一篇了。

學透CSS-萬字長文助學圖片屬性（下）-mask-image實現聚光燈效果連載中

前言

mask-image

兼容性

相關屬性

mask-image

屬性值

none;

url(jpg/png/svg);

漸變

image(url(mask.png), skyblue);

有趣的例子-聚光燈

總結

學透CSS-萬字長文助學圖片屬性（下）-mask-image實現聚光燈效果 連載中

前言

mask-image

兼容性

相關屬性

mask-image

屬性值

none;

url(jpg/png/svg);

漸變

image(url(mask.png), skyblue);

有趣的例子-聚光燈

總結

學透CSS-萬字長文助學圖片屬性（下）-mask-image實現聚光燈效果連載中