css 的 mask

CSS 有一個小功能是 mask , 可以用來製作遮罩，和 clip-path 不同的地方是，他可以用漸層或用另一個圖片的 alpha 來做裁切, 範例如下 : ``` $mmcode(r1) ``` <div class="mmresult r1"> <style> .a08131_aa { width:300px; -webkit-mask-image:repeating-linear-gradient(0deg, #00000000,#000000ff 25%,#00000000 50%), repeating-linear-gradient(90deg, #00000000,#000000ff 25%,#00000000 50%) } .a08131_bb { width:300px; -webkit-mask-image:repeating-radial-gradient( #000000ff,#00000000 50%,#00000088); } .a08131_cc { width:300px; -webkit-mask:url(https://yiharng.github.io/bomb.png) 0 0/150px 80px repeat ; } </style> <img class="a08131_aa" src="https://yiharng.github.io/bird.jpg"> <img class="a08131_bb" src="https://yiharng.github.io/bird.jpg"> <img class="a08131_cc" src="https://yiharng.github.io/bird.jpg"> </div> 完整語法是 : ``` -webkit-mask: url(圖片) x y/寬 高 repeat; -webkit-mask-image: url(圖片); -webkit-mask-position: x y; -webkit-mask-size: 寬 高; -webkit-mask-repeat: repeat 或 no-repeat; ``` 其它更詳細的參數可以參考 https://developer.mozilla.org/zh-CN/docs/Web/CSS/mask

CSS 有一個小功能是 mask , 可以用來製作遮罩，和 clip-path 不同的地方是，他可以用漸層或用另一個圖片的 alpha 來做裁切, 範例如下 :

<style>
.a08131_aa
{
  width:300px;
  -webkit-mask-image:repeating-linear-gradient(0deg, 
      #00000000,#000000ff 25%,#00000000 50%),
repeating-linear-gradient(90deg, 
      #00000000,#000000ff 25%,#00000000 50%)
}
.a08131_bb
{
  width:300px;
  -webkit-mask-image:repeating-radial-gradient(
      #000000ff,#00000000 50%,#00000088);
}
.a08131_cc
{
  width:300px;
  -webkit-mask:url(https://yiharng.github.io/bomb.png) 0 0/150px 80px repeat ;
}
</style>

<img class="a08131_aa" src="https://yiharng.github.io/bird.jpg">
<img class="a08131_bb" src="https://yiharng.github.io/bird.jpg">
<img class="a08131_cc" src="https://yiharng.github.io/bird.jpg">

完整語法是 :

-webkit-mask: url(圖片) x y/寬 高 repeat;

-webkit-mask-image: url(圖片);
-webkit-mask-position: x y;
-webkit-mask-size: 寬 高;
-webkit-mask-repeat: repeat 或 no-repeat;

其它更詳細的參數可以參考 https://developer.mozilla.org/zh-CN/docs/Web/CSS/mask