<nav id="chj2t"><big id="chj2t"><video id="chj2t"></video></big></nav>
  • <tbody id="chj2t"><pre id="chj2t"></pre></tbody>
    <li id="chj2t"><tr id="chj2t"><cite id="chj2t"></cite></tr></li>

      <em id="chj2t"></em>
      1. <rp id="chj2t"><object id="chj2t"></object></rp>
        <th id="chj2t"><pre id="chj2t"><sup id="chj2t"></sup></pre></th>

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

        首頁>>前端開發

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

        首頁 2022-12-01 前端開發 937 ℃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

        搜索
        分類
        熱門標簽
      2. 首頁
      3. 電話
      4. QQ
      5. ?
        聯系老劉手機
        1043025812
        聯系老劉微信
        掃描微信二維碼
        人妻精品动漫H|2021国产精品视频|亚洲国产天堂久久综合|凹凸国产熟女精品视频国语
        <nav id="chj2t"><big id="chj2t"><video id="chj2t"></video></big></nav>
      6. <tbody id="chj2t"><pre id="chj2t"></pre></tbody>
        <li id="chj2t"><tr id="chj2t"><cite id="chj2t"></cite></tr></li>

          <em id="chj2t"></em>
          1. <rp id="chj2t"><object id="chj2t"></object></rp>
            <th id="chj2t"><pre id="chj2t"><sup id="chj2t"></sup></pre></th>