使用CSS實(shí)現(xiàn)中間鏤空的圖片遮罩效果
bokeyy 發(fā)布時(shí)間：2015-12-24 12:08:16 作者：袁源 
我要評(píng)論
我要評(píng)論這篇文章主要介紹了使用CSS實(shí)現(xiàn)中間鏤空的圖片遮罩效果的方法,文中同時(shí)附帶介紹了一個(gè)用CSS3實(shí)現(xiàn)的鏤空一個(gè)圓形的代碼示例,需要的朋友可以參考下
中間鏤空的圖片遮罩指的大概就是這樣一個(gè)效果：
鏤空一個(gè)洞的代碼
CSS Code復(fù)制內(nèi)容到剪貼板
- <div id="container" style="position: relative; margin: 550px 0 0 50px;">
- <svg style="position: absolute;" width="400" height="280">
- <defs>
- <mask id="mask3">
- <rect x="0" y="0" width="100%" height="100%" style="stroke:none; fill: #ccc"></rect>
- <circle id="circle1" cx="100" cy="100" r="50" style="fill: #000" />
- </mask>
- </defs>
- <rect x="0" y="0" width="100%" height="100%" style="stroke: none; fill: #ccc; mask: url(#mask3)"></rect>
- </svg>
- <img src="http://img6.cache.netease.com/cnews/2014/11/3/20141103100737855b7.jpg" />
- </div>
鏤空多個(gè)洞的代碼
CSS Code復(fù)制內(nèi)容到剪貼板
- <div id="container" style="position: relative;">
- <svg style="position: absolute;" width="400" height="280">
- <defs>
- <mask id="mask3">
- <rect x="0" y="0" width="100%" height="100%" style="stroke:none; fill: #ccc"></rect>
- <circle id="circle1" cx="100" cy="50" r="50" style="fill: #000" />
- <circle id="circle1" cx="300" cy="100" r="50" style="fill: #000" />
- <circle id="circle1" cx="100" cy="200" r="50" style="fill: #000" />
- </mask>
- </defs>
- <rect x="0" y="0" width="100%" height="100%" style="stroke: none; fill: #ccc; mask: url(#mask3)"></rect>
- </svg>
- <img src="http://img6.cache.netease.com/cnews/2014/11/3/20141103100737855b7.jpg" />
- </div>
CSS3 版
用 box-shadow ，代碼如下：
CSS Code復(fù)制內(nèi)容到剪貼板
- position: fixed;
- left: 150px;
- top: 35px;
- width: 100px;
- height: 100px;
- border-radius: 100px;
- box-shadow: rgba(0,0,0,.8) 0px 0px 0px 2005px;
- z-index: 100;
缺點(diǎn)是只能鏤空一個(gè)洞。
相關(guān)文章
這篇文章主要介紹了CSS實(shí)現(xiàn)鏤空遮罩效果,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-08-20
這篇文章主要介紹了用純CSS實(shí)現(xiàn)鏤空效果的示例代碼的相關(guān)資料，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-02-25
這篇文章主要介紹了CSS實(shí)現(xiàn)鏤空效果的示例代碼的相關(guān)資料,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-12-24CSS3中文字鏤空、透明值、陰影效果設(shè)置示例小結(jié)
這篇文章主要介紹了CSS中文字鏤空、透明值、陰影效果設(shè)置示例小結(jié),其中通過(guò)text-stroke-color透明值的設(shè)置可以讓文字在某些程度上更加柔和,需要的朋友可以參考下2016-03-07CSS背景色鏤空技術(shù)實(shí)際應(yīng)用及進(jìn)階分享
這篇文章主要介紹了CSS背景色鏤空技術(shù)實(shí)際應(yīng)用及進(jìn)階相關(guān)資料，需要的朋友可以參考下2026-02-06
這篇文章主要介紹了css3遮罩層鏤空效果的多種實(shí)現(xiàn)方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)2020-05-11
