使用css將網頁變成黑白色

来源:https://www.cnblogs.com/M-fengye/archive/2020/04/04/12631381.html

其實將整個網頁全局變色,無非就是三種,css直接設置,添加svg濾鏡,通過js遍歷所有標簽更改顏色,於是 1、css 直接編輯樣式,然後在需要應用的地方設置class 1 .gray { 2 -webkit-filter: grayscale(100%); 3 -moz-filter: graysc ...


其實將整個網頁全局變色,無非就是三種,css直接設置,添加svg濾鏡,通過js遍歷所有標簽更改顏色,於是

1、css

直接編輯樣式,然後在需要應用的地方設置class

1 .gray { 
2     -webkit-filter: grayscale(100%);
3     -moz-filter: grayscale(100%);
4     -ms-filter: grayscale(100%);
5     -o-filter: grayscale(100%);
6     filter: grayscale(100%);
7     filter: gray;
8 }

2、svg

先編寫svg文件

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
    <filter id="grayscale">
        <feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"/>
    </filter>
</svg>

css調用

1 filter: url(gray.svg#grayscale);

3、js遍歷

直接插入代碼就好啦,能白嫖是不可能手寫的(ps:用rgba和!important的無法改變,其他未實驗)

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

js源不太好,會導致網頁載入過慢,可手動下載到本地grayscale.js(點開之後F12,切換到Network標簽,刷新網頁會出現一個文件,右鍵save as)

然後用js或者jq調用

1 /*js調用*/
2 grayscale(document.getElementById("thisImage"));
3 /*jq調用*/
4 grayscale($("#thisImage"));

大家可能沒有註意到這篇博客是2020-04-04,讓我們一起緬懷戰疫中逝去的英雄,願凜冬消散 春暖花開後 再無國殤

原文地址https://blog.csdn.net/qq_15096707/article/details/47130877


您的分享是我們最大的動力!

更多相關文章
  • 最近編寫響應式的時候在使用@media用的不是很順手,所以就記錄一下方便查看 基本語法: @media +( not | only) + 媒體類型 +(and+ 媒體查詢) 我們首先瞭解一下媒體類型,常用的不多,就幾個:screen(電腦屏幕) ,print (列印或者列印預覽),all(所有設備) ...
  • ```javascript ``` ![在這裡插入圖片描述](https://img-blog.csdnimg.cn/20200404222513323.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text... ...
  • 案例: 父組件 <template> <div id="app"> <h1>vuex</h1> <h3>count:{{count}}</h3> <button @click="count++">+1</button> <button @click="count--">-1</button> <!- ...
  • 博主:www 原文地址: https://www.cnblogs.com/wangjian8888/p/6092158.html。 字體屬性:(font) 大小 {font-size: x-large;}(特大) xx-small;(極小) 一般中文用不到,只要用數值就可以,單位:PX、PD 樣式 ...
  • 前言 做項目涉及表情在網頁上顯示。稍微研究了一下實現方案,整體思路不複雜,就是稍微涉及到一些新概念和新方法。 精靈圖 精靈圖又稱雪碧圖,簡單來說就是一種把很多小圖片拼成一張大圖的圖片形式。下圖就是表情項目中的精靈圖。註意這張精靈圖是png格式,除表情外其他區域都是透明的。 精靈圖解決的問題是:很多網 ...
  • 小計劃 四月抓基礎 五月二刷重點知識,加點項目鞏固(大概三個項目的樣子) 六月抓面試,沖秋招。 四月博客會更以下內容 VUE 全套搭建小米商城(更註重前端) 三種 node.js 方式搭建個人博客(更註重後端) 深入解讀 ES6 系列 再學 JavaScript ES(6-10) 大話 HTTP ... ...
  • 路由(vue-router) 現在的應用都流行SPA應用(single page application) 傳統的項目大多使用多頁面結構,需要切換內容的時候我們往往會進行單個HTML文件的跳轉,這個時候網路、性能影響,瀏覽器會出現不定時間的空白界面,用戶體驗不好 單頁面應用就是用戶通過某些操作地址欄 ...
  • 父組件給子組件傳值 // 父<div id = "app"> <my-content></my-content></div> // 子<template id="content"> <div class="content"> 這裡是內容區域 {{ msg }} </div></template> 在 ...
一周排行
  • C#6.0新特性 C#7.0新特性 C#8.0新特性 ...
  • out變數 可以直接在方法中使用out申明變數 int.TryParse("123", out var result); 元組 元組的申明 var alphaBetaStart = (alpha: "a", beta: "b"); Console.WriteLine($"{alphaBetaStar ...
  • 在我們的項目中,通常會把數據存儲到關係型資料庫中,比如Oracle,SQL Server,Mysql等,但是關係型資料庫對於併發的支持並不是很強大,這樣就會造成系統的性能不佳,而且存儲的數據多為結構化數據,對於非結構數據(比如文本)和半結構化數據(比如JSon) 就顯得不夠靈活,而非關係型資料庫則很 ...
  • 這幾天終於弄懂了async和await的模式,也搞明白了一直在心裡面積壓著的許多問題,所以寫一篇博客來和大家分享一下。 關於非同步機制我認為只要記住的以下幾點,就可以弄明白了: 1.我認為async和awwait兩個修飾符中最關鍵的是await,async是由於方法中包含await修飾符之後才在方法定 ...
  • 實現WCF的步驟如下: 設計服務協議 實現服務協議 配置服務 托管服務 生成客戶端(這步可有可無) 設計或定義服務協議要麼使用介面,要麼使用類。建議介面,使用介面好處一堆例如修改介面的實現,但是服務協定有無需改變。 設計服務協議,介面上使用 ServiceContractAttribute ,方法上 ...
  • 什麼鬼,我的CPF快寫好了,你居然也要搞跨平臺UI框架?什麼Maui? 之前怎麼不早說要搞跨平臺UI框架呢?看到谷歌搞flutter眼紅了?明年年底發佈?又搞這種追別人屁股的爛事情。 什麼MVU模式?模仿Dart?用C#代碼直接寫UI的模式和我的CPF很像啊。 當初我考慮過XML,Json來描述UI ...
  • 寫在前面 Docker作為開源的應用容器引擎,可以讓我們很輕鬆的構建一個輕量級、易移植的容器,通過Docker方式進行持續交付、測試和部署,都是極為方便的,並且對於我們開發來說,最直觀的優點還是解決了日常開發中的環境配置與部署環境配置上的差異所帶來的種種疑難雜症,從此推脫產品的措辭也少了——“我電腦 ...
  • 一、前言 回顧:認證授權方案之授權初識 從上一節中,我們在對授權系統已經有了初步的認識和使用,可以發現,asp.net core為我們提供的授權策略是一個非常強大豐富且靈活的認證授權方案,能夠滿足大部分的授權場景。 在ConfigureServices中配置服務:將授權服務添加到容器 public ...
  • 項目背景: 工作之餘兼職一家公司(方向是工業4.0)給做IM系統,主要功能包括:文字、 圖片、文件傳輸、遠程協助、視頻語音等等。這些功能都是基於群會話, 比如工廠操作工人遇到問題,請求遠程專家,這個初級專家不能解決問題,會邀請一個高級專家進來解決。開發過程中主要遇到的問題是視頻和語音這一塊,像其他的... ...
  • 基礎概念 Microsoft中間語言(MSIL),也成為通用中間語言(CIL),是一組與平臺無關的指令,由特定於語言的編譯器從源代碼生成。MSIL是獨立於平臺的,因此,他可以在任何公共語言基礎架構支持特定的環境上執行。 通過JIT編譯器將MSIL轉換為特定電腦環境的特定機器代碼。這是在執行MSIL ...