DIV CSS 佈局教程網

這篇文章主要介紹了使用CSS實現中間镂空的圖片遮罩效果的方法,文中同時附帶介紹了一個用CSS3實現的镂空一個圓形的代碼示例,需要的朋友可以參考下

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

镂空一個洞的代碼
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="/School/UploadFiles_7810/201603/20160323102435711.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="/School/UploadFiles_7810/201603/20160323102435711.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;

缺點是只能镂空一個洞。