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

    首頁>>前端開發

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

    首頁 2022-12-01 前端開發 897 ℃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
    聯系老劉微信
    掃描微信二維碼
    34pao国产成视频永久免费_国产精品专区第5页_无码精品A∨在线观看_国色天香精品一卡二卡三卡_ww.国产精品