怎么使用CSS實現中間鏤空的圖片遮罩效果

這篇文章主要講解了“怎么使用CSS實現中間鏤空的圖片遮罩效果”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“怎么使用CSS實現中間鏤空的圖片遮罩效果”吧！

中間鏤空的圖片遮罩指的大概就是這樣一個效果：

鏤空一個洞的代碼

CSS Code復制內容到剪貼板

1. <div id="container" style="position: relative; margin: 550px 0 0 50px;">   

2. <svg style="position: absolute;" width="400" height="280">   

3. <defs>   

4. <mask id="mask3">   

5. <rect x="0" y="0" width="100%" height="100%" style="stroke:none; fill: #ccc"></rect>   

6. <circle id="circle1" cx="100" cy="100" r="50" style="fill: #000" />   

7. </mask>   

8. </defs>   

9. <rect x="0" y="0" width="100%" height="100%" style="stroke: none; fill: #ccc; mask: url(#mask3)"></rect>   

10. </svg>   

11. <img src="http://img6.cache.netease.com/cnews/2014/11/3/20141103100737855b7.jpg" />   

12. </div>  

鏤空多個洞的代碼

CSS Code復制內容到剪貼板

1. <div id="container" style="position: relative;">   

2. <svg style="position: absolute;" width="400" height="280">   

3. <defs>   

4. <mask id="mask3">   

5. <rect x="0" y="0" width="100%" height="100%" style="stroke:none; fill: #ccc"></rect>   

6. <circle id="circle1" cx="100" cy="50" r="50" style="fill: #000" />   

7. <circle id="circle1" cx="300" cy="100" r="50" style="fill: #000" />   

8. <circle id="circle1" cx="100" cy="200" r="50" style="fill: #000" />   

9. </mask>   

10. </defs>   

11. <rect x="0" y="0" width="100%" height="100%" style="stroke: none; fill: #ccc; mask: url(#mask3)"></rect>   

12. </svg>   

13. <img src="http://img6.cache.netease.com/cnews/2014/11/3/20141103100737855b7.jpg" />   

14. </div>  

CSS3 版

用 box-shadow ，代碼如下：

CSS Code復制內容到剪貼板

1. position: fixed;   

2. left: 150px;   

3. top: 35px;   

4. width: 100px;   

5. height: 100px;   

6. border-radius: 100px;   

7. box-shadow: rgba(0,0,0,.8) 0px 0px 0px 2005px;   

8. z-index: 100;  

缺點是只能鏤空一個洞。

感謝各位的閱讀，以上就是“怎么使用CSS實現中間鏤空的圖片遮罩效果”的內容了，經過本文的學習后，相信大家對怎么使用CSS實現中間鏤空的圖片遮罩效果這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！