這篇文章給大家分享的是有關(guān)CSS中mask-image屬性的示例分析的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過來看看吧。

龍湖網(wǎng)站制作公司哪家好，找創(chuàng)新互聯(lián)建站！從網(wǎng)頁設(shè)計(jì)、網(wǎng)站建設(shè)、微信開發(fā)、APP開發(fā)、響應(yīng)式網(wǎng)站設(shè)計(jì)等網(wǎng)站項(xiàng)目制作，到程序開發(fā)，運(yùn)營維護(hù)。創(chuàng)新互聯(lián)建站2013年至今到現(xiàn)在10年的時(shí)間，我們擁有了豐富的建站經(jīng)驗(yàn)和運(yùn)維經(jīng)驗(yàn)，來保證我們的工作的順利進(jìn)行。專注于網(wǎng)站建設(shè)就選創(chuàng)新互聯(lián)建站。

CSS mask遮罩屬性的歷史非常久遠(yuǎn)了，遠(yuǎn)到比CSS3 border-radius等屬性還要久遠(yuǎn)，最早是出現(xiàn)在Safari瀏覽器上的，差不多可以追溯到09年。

不過那個(gè)時(shí)候，遮罩只能作為實(shí)驗(yàn)性的屬性，做一些特效使用。畢竟那個(gè)年代還是IE瀏覽器的時(shí)代，屬性雖好，但價(jià)值有限。

但是如今情況卻大有變化，除了IE和Edge瀏覽器不支持，F(xiàn)irefox，Chrome以及移動(dòng)端等都已經(jīng)全線支持，其實(shí)際應(yīng)用價(jià)值已不可同日而語。尤其Firefox瀏覽器，從版本55開始，已經(jīng)全面支持了CSS3 mask屬性。并且mask屬性規(guī)范已經(jīng)進(jìn)入候選推薦規(guī)范之列，會(huì)說以后進(jìn)入既定規(guī)范標(biāo)準(zhǔn)已經(jīng)是板上釘釘?shù)氖虑?，大家可以放心學(xué)習(xí)，將來必有用處。

在過去，CSS mask屬性在使用的時(shí)候就是mask: xxx，但是現(xiàn)在隨著這個(gè)屬性的規(guī)范化，mask屬性實(shí)際上已經(jīng)成為了諸多mask-*的縮寫，這和background, border性質(zhì)是一樣的。

具體是哪些屬性的縮寫呢，可以參見下面的列表：

1. mask-image

2. mask-mode

3. mask-repeat

4. mask-position

5. mask-clip

6. mask-origin

7. mask-size

8. mask-type

9. mask-composite

下面我們先來介紹 mask-image 屬性的用法。

mask-image指遮罩使用的圖片資源，默認(rèn)值是none，也就是無遮罩圖片。因此，和border屬性中的border-style屬性類似，是一個(gè)想要有效果就必須設(shè)定的屬性值。

mask-image遮罩所支持的圖片類型非常的廣泛，可以是url()靜態(tài)圖片資源，格式包括JPG，PNG以及SVG等都是支持的；也可以是動(dòng)態(tài)生成的圖片，例如使用各種CSS3漸變繪制的圖片。語法上支持CSS3各類漸變，以及url()功能符，image()功能符，甚至element()功能符。同時(shí)還支持多背景，因此理論上，使用mask-image我們可以遮罩出任意我們想要的圖形，非常強(qiáng)大。

眼見為實(shí)，我們通過大量案例來展示mask-image的強(qiáng)大之處。

首先，下面所有案例使用原始圖如下：

我們先來一個(gè)最基礎(chǔ)的png圖片遮罩展示。

CSS代碼如下：

.mask-image {
    width: 250px; height: 187.5px;
    -webkit-mask-image: url(loading.png);
    mask-image: url(loading.png);
}

HTML代碼如下：

<img src="ps1.jpg" class="mask-image">

最后的效果，如下圖所示：

從上面這個(gè)最基本的案例，我們可以看出，所謂遮罩，就是原始圖片只顯示遮罩圖片非透明的部分。例如本案例中，loading圓環(huán)有顏色部分就是外面一圈圓環(huán)，于是最終我們看到效果是原始圖片，只露出了一個(gè)一個(gè)的圈圈環(huán)。并且半透明區(qū)域也準(zhǔn)確遮罩顯示了。

因此，我們很少使用jpg圖片來作為遮罩圖片的，因?yàn)閖pg圖片一定是完全不透明的，最終的效果就是原圖什么也看不到。

另外，如果loading.png加載失敗，則Firefox，Chrome瀏覽器下直接原始圖不顯示。

接著我們再來看一個(gè)SVG圖形遮罩效果展示。

css代碼如下：

.mask-image {
    width: 250px; height: 187.5px;
    -webkit-mask-image: url(star.svg);
    mask-image: url(star.svg);
}

html代碼如下：

<img src="ps1.jpg" class="mask-image">

最終的效果和上圖相似。

上面是將svg作為背景圖來實(shí)現(xiàn)的，現(xiàn)在我們再使用SVG圖形中<mask>元素作為遮罩元素來實(shí)現(xiàn)它。

CSS 代碼如下：

.mask-image {
    width: 250px; height: 187.5px;
    -webkit-mask-image: url(#mask);
    mask-image: url(#mask);
    /* Firefox外鏈也支持 */
    /* mask-image: url(ellipse-rect.svg#mask); */
}

html代碼如下：

<svg>
    <defs>   
        <mask id="mask" maskContentUnits="objectBoundingBox">
            <!-- 柔化邊緣 -->
            <ellipse cx=".5" cy=".5" rx=".48" ry=".28" fill="black"></ellipse>
            <rect x=".2" y="0" width=".6" height="1" rx=".1" ry=".1" fill="black"></rect>
            <!-- 主體遮罩 www.xttblog.com -->
            <ellipse cx=".5" cy=".5" rx=".4" ry=".2" fill="white"></ellipse>
            <rect x=".3" y=".1" width=".4" height=".8" rx=".1" ry=".1" fill="white"></rect>
        </mask>
    </defs>   
</svg>
<img src="ps1.jpg" class="mask-image">

再使用SVG元素內(nèi)聯(lián)SVG的<mask>，看下面的實(shí)現(xiàn)。

CSS 代碼：

.mask-image {
    width: 250px; height: 187.5px;
    -webkit-mask-image: url(#mask);
    mask: url(#mask);
    mask-image: url(#mask);
    /* Firefox外鏈也支持 */
    /* mask-image: url(ellipse-rect.svg#mask); */
}

SVG實(shí)現(xiàn)的代碼：

<svg>
    <defs>   
        <mask id="mask" maskContentUnits="objectBoundingBox">
            <!-- 柔化邊緣 www.xttblog.com-->
            <ellipse cx=".5" cy=".5" rx=".48" ry=".28" fill="black"></ellipse>
            <rect x=".2" y="0" width=".6" height="1" rx=".1" ry=".1" fill="black"></rect>
            <!-- 主體遮罩 -->
            <ellipse cx=".5" cy=".5" rx=".4" ry=".2" fill="white"></ellipse>
            <rect x=".3" y=".1" width=".4" height=".8" rx=".1" ry=".1" fill="white"></rect>
        </mask>
    </defs>   
</svg>
<svg width="250" height="186">
    <image xlink:href="ps1.jpg" class="mask-image" width="250" height="186"></image>
</svg>

無論是clip-path還是這里的mask，外鏈SVG特性的支持一定是比內(nèi)聯(lián)SVG弱的。既然Chrome瀏覽器連普通HTML的內(nèi)聯(lián)SVG的<mask>都不支持，自然肯定不支持這里的外鏈SVG文件<mask>元素的遮罩支持。

那之前表現(xiàn)良好的Firefox瀏覽器呢？

比較幸運(yùn)，F(xiàn)irefox瀏覽器最近支持了任意元素外鏈SVG文件的<mask>，為什么說最近呢？我看了下我現(xiàn)在的Firefox，顯示最新版，版本是56，然后Firefox支持任意元素可以使用外鏈SVG <mask>元素作為遮罩是版本55開始了。

至于上面的，任意元素內(nèi)聯(lián)SVG <mask>的支持，F(xiàn)irefox很早就已經(jīng)支持。

相信不久的版本，Chrome瀏覽器也會(huì)對其進(jìn)行支持的，可以耐心等待。

感謝各位的閱讀！關(guān)于“CSS中mask-image屬性的示例分析”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

新聞名稱：CSS中mask-image屬性的示例分析
URL網(wǎng)址：http://aaarwkj.com/article12/pesjgc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供營銷型網(wǎng)站建設(shè)、App開發(fā)、網(wǎng)站設(shè)計(jì)、網(wǎng)站內(nèi)鏈、虛擬主機(jī)、域名注冊

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)