CSS3教你把頁面變成悲傷的黑白- 4月4日悼念那些逝去的英雄們

2020年4月4日舉行了全國性哀悼活動，緬懷那些在對抗擊新冠肺炎疫情鬥爭犧牲烈士和逝世同胞，願逝者安息

咱們看到這一天不少網站忽然就變成了黑白色，像這樣：

那他們是怎麼實現的呢？這就離不開CSS3中的filter(濾鏡) 屬性啦

filter

filter是css3中的一個新屬性，它能夠給咱們的頁面元素添加各類各樣的濾鏡，而使咱們的圖像變成灰色的是使用到了filter 中的grayscale函數，具體設置：

filter:grayscale(100%)

若是咱們只想把圖片變成灰色，這樣設置：

img{
  filter:grayscale(100%)  
}

若是咱們想把這個網站都變成灰色咱們只須要設置：

html{
  filter:grayscale(100%)  
}

filter兼容性

filter屬性IE沒法支持，其餘瀏覽器都可支持，爲了更好的兼容性，咱們須要設置爲：

html{
    -webkit-filter: grayscale(100%); /* 老版本的Chrome, Safari, Opera */
    -moz-filter: grayscale(100%);/* 老版本的Firefox */
    filter: grayscale(100%);
    filter: grayscale(1);
}

這樣就實現了黑白效果哦~

最後 🙌

好啦，以上就是我本次分享的所有內容啦，若是你以爲個人文章對你有一丟丟幫助，那麼請不要吝嗇你的贊👍哦，阿門~