一站式百度SEO排名優化!-找老劉博客 低投入,高轉化,精益求精、一絲不茍:旨在提供更好的SEO服務!

首頁>>前端開發

網站頁面黑白色濾鏡效果實現技巧

首頁 2022-12-01 前端開發 973 ℃Tags: filter 濾鏡 css


一、前言

在很多時候我們需要把整個網站變灰,比如“致敬”。來看看網站是如何實現整體變灰的。

人的一生是短暫的,重要的是能夠在短暫的時間內造就無限的價值。由衷的表示致敬我們將永遠銘記!

微信截圖_20221201085333.png

如果首頁html換成黑白風格的,這個好實現??墒敲總€封面圖都重新做一張黑白的版本,每個都是用戶自己的投稿啊,怎么保證封面圖都能黑白色呢?后期靠人工換的話,那代價也大了,而且也很傻。

二、解密HTML如何將網站變為黑白

眾所周知我們平時使用的網站都是IT從業者辛勤勞動所創造出來的,其實創造一個黑白網頁其實并不難,真的很簡單,因為只需要一行代碼。

html {-webkit-filter: grayscale(100%);}

是的你沒看錯就這一行一個網頁就變成了一個灰度圖

下面我將進行一次簡單的演示

這是一個非常簡單的一段HTML代碼

突然我發現在html根結點html標簽下面有一個屬性:filter: grayscale(1);

image.png

這是一個非常簡單的一段HTML代碼

html{
-webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
filter: grayscale(100%);
}

filter 屬性定義了元素(通常是<img>)的可視效果(例如:模糊與飽和度)。

瀏覽器支持:

grayscale():

將圖像轉換為灰度圖像。值定義轉換的比例。值為100%則完全轉為灰度圖像,值為0%圖像無變化。值在0%到100%之間,則是效果的線性乘子。若未設置,值默認是0。



image.png

三、IE瀏覽器

上面所說的css3屬性IE瀏覽器并不支持,其實這樣做已經覆蓋了大部分瀏覽器

filter: gray;

這個屬性直接加載html上是不管用的,如果需要圖片變灰可以只將樣式作用于img標簽,或者用*通配符作用于所有元素,這樣整個網站就會變灰。

經測試,在IE7-9都是沒問題的,IE9以上不能生效。

四、通用方案

如果你執意所有的瀏覽器都有這個效果,可以通過Greyscale.js實現:

在頁面引入js文件:

<script src="http://james.padolsey.com/demos/grayscale/grayscale.js"></script>

然后:

grayscale(document.getElementsByTagName("img"));

或者直接這樣:

grayscale(document.getElementsByTagName("html"));

實現原理:IE瀏覽器下是添加灰度濾鏡,這個大家都懂的。其他瀏覽器貌似使用Canvas中的getImageData方法,然后對每個像素點進行灰度轉換。

因此,在現代瀏覽器下,對于該方法,圖片的灰度處理有兩個局限性:

1. 速度。300*300這張一般般大小的圖片變灰就要數秒之久;

2. 跨域。安全性機制,無法轉換跨域的圖片為黑白色。

五、更多

除了黑白色,我們還可以實現別的效果嗎?是可以的,請注意filter屬性,MDN如是說:

filter CSS屬性將模糊或顏色偏移等圖形效果應用于元素。濾鏡通常用于調整圖像,背景和邊框的渲染。

模糊度 filter: blur();

image.png

對比度:filter: contrast();

image.png

色相旋轉:filter: hue-rotate(); 

image.png

陰影: filter: drop-shadow() ;

image.png

搜索
分類
熱門標簽
  • 首頁
  • 電話
  • QQ
  • ?
    聯系老劉手機
    1043025812
    聯系老劉微信
    掃描微信二維碼
    色成年激情久久综合|中文国产成人精品久久不卡|综合一区久久k极品视觉盛宴|亚洲人成影院在线 国产精品1024 99久久久无码国产aaa精品 52色鲁超碰这里只有精品网址 久久精品国产厕所嘘嘘 精品国产三级A在线观看 国内揄拍高清国内精品对白 国产欧美精品一区 久久久精品免费免费 国产精品视频YJIZZ