會用PS的童鞋一定知道“蒙版”的概念，它可以在圖片上實現一定的遮罩效果，當然這里我們不介紹ps里的蒙版，而是介紹利用CSS3的新屬性-webkit-mask來實現網頁中的圖片遮罩效果。 大家對-webkit-mask這一屬性可能不太熟悉，或許有很多人都是第一次見到，沒錯，這一屬性也是還未被眾多 ...

這是一個實驗中的功能，用於設置元素上遮罩層的圖像。 一、Values none：默認值，透明的黑色圖像層，也就是沒有遮罩層。 <mask-source>：<mask>或CSS圖像的url<image>圖片作為遮罩層 二、語法： 三、效果圖 ...

mask demo效果演示：http://dtdxrk.github.io/game/css3-demo/mask.html mask 的屬性： -webkit-mask-image:url | gradient /*可以使用圖片或漸變作為遮罩層 ...

漸變 線性漸變:linear gradient 語法：background: -webkit-linear-gradient( [point || angle ] , stop ,stop +） 第一個參數可以是用於設置起始點(起始邊)eg:top left 或者 top ...

前不久做了一個項目，需要一個小效果，就是獲取用戶頭像以心形的形狀展現在頁面上，開始小五想的實現方式是canvas畫圖或CSS3的clip（剪切），發現都不理想，和設計稿里的圖形美觀度相差太大，而且實現起來太麻煩，后來，小五采用了一個CSS3的新增屬性完美的解決了這個問題，今天就來和大家分享 ...

最近在b站上看到一種彈幕效果叫做智能防擋彈幕，也就是傳說中的蒙版彈幕， 打開之后效果大概是這樣的 再也不用擔心男神女神的絕世容顏被花里胡哨的彈幕擋住啦，是不是感覺很神奇。 實現原理其實就是類似於ps的蒙版，也就是說將圖像的一部分 “隱藏”。這里我們需要用到的是css3的mask遮罩屬性 ...

　　-webkit-filter是css3的一個屬性，Webkit率先支持了這幾個功能，感覺效果很不錯。下面咱們就學習一下filter這個屬性吧。 現在規范中支持的效果有： grayscale 灰度 值為0-1之間的小數 sepia 褐色 ...

先上一張咱們的原始圖 rs7.jpg 如下： 一、mask-image屬性 　　1.基本的png圖遮罩展示 　　我們使用的遮罩圖片 ad.png，如下： 　　 　　html： 　　 　　css： 　　 　　效果 ...