[crop系列] 3 圖片mask

Frontend, CSS
4 mins.
  1. 1. 目標
  2. 2. 思路
  3. 3. 解法
  4. 4. 結論
CSS crop

crop系列文之3，今天要來說一下怎麼用css的方式做一個四周有遮罩中間一個50*50的圓是亮的功能

還沒看前面兩篇嗎？趕快來這邊看[crop系列] 1 scale和position的糾葛、[crop系列] 2 canvas drawimage應用

目標

這是我們要達成的目標，一開始看到的時候覺得很簡單，不就是一張圖，然後給他一個寬高跟圖相同的div然後background是有顏色且透明，再來就是…

ㄟ都，再來…怎麼再來阿，都已經被蓋上background了，怎麼中間挖洞給他QQ

思路

  • background的區域繞過中間的圓 - 完全沒想法怎麼做（如果你知道請告訴我<(_ _)>）

  • 用第二張圖來顯示中間的圓

這個方法比較好理解，那我們來嘗試一下看看

1
2
3
4
<div class="imageBlock">
	<img src="https://mdn.mozillademos.org/files/5397/rhino.jpg" style="background:white;opacity:0.6;" />
    <img src="https://mdn.mozillademos.org/files/5397/rhino.jpg" style="position:absolute;width:50px;height:50px;left:50%;transform:translateX(-50%);"/>
</div>

寫完了上面這段以後，覺得完工了，這功能實在太簡單了嘛～
但偏偏風漸漸把距離吹的好遠，圖怎麼變小了！根本沒有達到我們想要的阿…..

解法

還好在css有一個有趣的屬性叫做clip-path，可以先來看一下MDN的說明

The clip-path CSS property creates a clipping region that sets what part of an element should be shown. Parts that are inside the region are shown, while those outside are hidden.

然後再看一下範例，完全就是我們要的效果阿，太棒了！馬上來套用屬性到功能上

1
2
3
4
<div class="imageBlock">
	<img src="https://mdn.mozillademos.org/files/5397/rhino.jpg" style="background:white;opacity:0.6;" />
    <img src="https://mdn.mozillademos.org/files/5397/rhino.jpg" style="position:absolute;top:0;left:0;bottom:0;right:0;clip-path:circle(50px at center 25px)"/>
</div>

功能完成，可以交差囉！那我們就要來看一下這個屬性的詳細內容
circle(radius at position)

  • radius一定不要設定錯，給了直徑就變成兩倍大
  • 關於position的部份可以參考這篇

結論

這個屬性目前的支援度也不錯，至少在chrome、safari、ios手機上都是正常的，有了這個屬性可以降低很多的麻煩，不然光搞這個可能就又要多花時間…

慢慢的把核心功能以外的都介紹的差不多了，最後就是drag和zoom的囉，comming soon!

prev： next：