整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
到對圖片進行處理，我們經常會想到PS,美圖秀秀這類的圖像處理工具。作為前端,全棧開發者，我們經常會需要處理一些特效，例如根據不同的狀態，讓圖片顯示不同的顏色。或者是hover的時候，對圖片的對比度，陰影進行處理。
你以為這些是經過PS軟件處理出來的？不不不，只有一張圖片,純粹的是用css寫出來的。
本文的目標就是：手把手教大家學習CSS濾鏡（filter）屬性,CSS濾鏡提供的圖形特效，像模糊，銳化或元素變色。過濾器通常被用于調整圖片，背景和邊界的渲染。
使用CSS濾鏡只需要如下5步:
1. 準備工作
2. 使用sublime快速書寫HTML結構
3. 使用CSS選擇器選中目標標簽
4. CSS濾鏡的基本用法
5. CSS濾鏡實例演示
一、第一步 —— 準備工作
目標 : 下載并安裝sublime以及準備一張圖片素材
下載對應你操作系統的sublime編輯器，http://www.sublimetext.com/3
圖片素材:
小結 : 準備好代碼編輯器,比如sublime,hbuilder,vscode等編輯,都是可以的,再準備一張圖片素材
二、第二步 —— 書寫HTML結構
目標 : 使用sublime編輯器快速生成HTML5結構的頁面
1. 安裝sublime以后，并打開sublime.exe
2. 在電腦的某個目下新建一個空目錄code，將我們的圖片素材放一個images文件夾下，并把這個images文件夾也放在code中
3. 使用sublime打開我們剛準備好的code文件夾
4. 使用sublime新建一個HTML網頁文件,后綴名需要為html
5. 接著輸入一個英文輸入狀態下的!再按tab鍵,即可快速生成HTML5的基本結構!
6. 在網頁中插入內容
小結 : 使用代碼編輯器新建網頁文件,并加入兩張img圖片標簽,正確引入圖片
三、第三步 —— 使用CSS選擇器選中目標標簽
目標：使用CSS類選擇器選中我們頁面中的目標圖片標簽, 格式 .類名
小結 : 使用 css類選擇 格式: .類名 選中對應的目標標簽
四、第四步 —— CSS濾鏡的基本用法
目標：了解CSS濾鏡的基本用法以及各方法之間效果差異
1. CSS濾鏡基本語法
filter: function(param);
filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() ;
提示:允許同時使用多個濾鏡，多個濾鏡效果之間使用空格分隔。
2. CSS濾鏡支持的方法（function）有
– grayscale 灰度
– sepia 褐色
– saturate 飽和度
– hue-rotate 色相旋轉
– invert 反色
– opacity 透明度
– brightness 亮度
– contrast 對比度
– blur 模糊
– drop-shadow 陰影
了::before 和::after，CSS 的偽元素還有::first-line、::first-letter 和::selection 這三個，這三個相對來說就簡單得多，用法也較為純粹。沒看過前兩篇文章的，筆者建議大家看看：
CSS 偽元素基礎知識：before 與after （一）、CSS 偽元素基礎知識：content 與counter 實用技巧（二）
::first-line顧名思義就是「第一行」，通過這個偽元素可以輕松指定文字的第一行，需要注意的是::first-line 「不能」作用于display:inline的元素。以下面的例子，html里有一段文字如下所示：
<p> 前端達人公眾號，已經有五年的歷史啦，目前有幾千名前端開發者訂閱，公眾號的宗旨是：分享當下最實用的前端技術。關注前端達人，與數千名達人們一起進步！期待你的訂閱和關注！ </p>
CSS 只要這樣寫，頁面呈現出來的第一行就會是綠色的，不論視窗如何縮放，只有第一行會是綠色的。
p::first-line{
color:green;
}
::first-letter顧名思義就是「第一個字」，通過這個偽元素，可以做出許多文章第一個字放大或變色的效果，我們這里就用剛剛上面那段文字為例，把第一個字用下段的CSS 來做變化，就可以看到第一個字放大且變色了的效果。
p::first-letter{
font-weight:bold;
font-size:38px;
color:red;
}
雖然把第一個字放大了，但排版上仍然有點亂沒有美感，這時你可以加入line-height、float或padding等屬性進行修正，經過修正后，你會驚喜的發現很像報紙雜志會出經常用的效果（第一個字會跨行顯示）。
p::first-letter{
font-weight:bold;
font-size:38px;
color:red;
line-height:26px;
float:left;
padding:10px 5px 0 0;
}
不過很有趣的是，在實際應用的過程里，發現「有一些符號」是無法套用::first-letter 的，例如「『 {} [] 都不行，但如果后方加上其他文字或符號，又會跟著一起放大...( 到底是怎樣？ )
經過查詢W3C的官網，發現了下面這段話，意思大概就是說網頁里面有定義一些所謂「包覆式、點綴式的標點符號」，如果是這些包覆式的標點符號，基本上就無法放大，反而需要搭配其它字符進行使用，因此，在使用第一個字進行特殊變化時，就要注意有這種特殊狀況會發生。
參考：https://www.w3.org/TR/CSS21/selector.html#first-letter
::selection 是個十分常見的偽元素，它就是負責一段選取文字的效果，以下面這段CSS來說，選取后的文字，就會是深色背景，黃色文字。
p::selection{
color:yellow;
background:#543;
}
雖然我們能用CSS操控偽元素，但因為偽元素不存在于網頁元素內，所以無法通過JavaScript常規操控DOM的方式來修改或控制，不過JavaScript身為一個神通廣大的編程語言，仍然是有方法可以辦到的。
讀取偽元素屬性
一般來說使用JavaScript讀取某個元素DOM里的屬性不難，但相對來說要讀取一個不存在網頁里的元素就不容易，如果要讀取偽元素屬性，可以通過getComputedStyle來獲得，getComputedStyle是個可以獲取當前元素「所有的CSS屬性值」，讀取后會返回一個Object CSSStyleDeclaration，而這個屬性是只讀的，無法進行修改。
使用方法：window.getComputedStyle('元素', '偽元素')
舉例來說html 放入一個div 以及一個span，待會會用這個span 來顯示div 的::before 屬性。
<div id="d">我是 div</div> <span id="s"></span>
CSS 的部分指定偽元素的content和color。
#d::before{
content:'偽元素的content ';
color:red;
}
JavaScript使用window.getComputedStyle(d,'::before')獲取div里頭偽元素使用的style，然后顯示在span里面。
var d = document.getElementById('d');
var s = document.getElementById('s');
var b = window.getComputedStyle(d,'::before');
s.innerHTML = b.content +'<br/>'+b.color;
最后頁面呈現的結果，第一段就是原本的div加上紅色的偽元素文字，下方第一段是content的內容，緊接著是偽元素的顏色屬性。
修改偽元素屬性
我們可以讀取屬性值也就一定要嘗試修改，不過修改偽元素的屬性其實比想像中的難，必須通過insertRule這個方法在指定的style里插入「預設的規則」，讓這個規則去影響偽元素的屬性表現。
用法：style 標簽元素.insertRule(樣式規則, 0)
舉例來說我們的網頁布局如下，一開始開頭的部分有兩組style，第一組是我們賦予元素的樣式屬性，第二組則是要來定義規則的style，因為要加入規則，所以讓第二組style有一個id。至于html就放入一個div。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
#d::before{
content:'偽元素的 content ';
color:red;
}
</style>
<style id="css"></style>
</head>
<body>
<div id="d">我是div</div>
</body>
</html>
在完全沒有編寫JavaScript的狀態，應該會呈現如下圖的樣子：
JavaScript開聲明一個變量css，通過id獲取style，然后使用在指定一個變量給css.sheet，就可以通過insertRule的方法修改了。需要注意的是，由于規則加入時會放在整串style的開頭(第二個值預設0 )，所以純粹使用一個#d是無法覆蓋原本的屬性( CSS權重問題)，所以這邊使用#d#d兩次，就可以在權重上壓過原本的屬性。(當然如果要用!important也是可以)
var css = document.getElementById('css');
var d = document.getElementById('d');
var c = css.sheet;
c.insertRule("#d#d::before{content:'我是修改的 content ';}", 0);
c.insertRule("#d#d::before{color:blue;}", 0);
如此一來，呈現出來的效果就是通過JavaScript修改的。
修改偽元素content
我們知道::before和::after的content可以通過attr獲取父元素的屬性，因此通過改變這個屬性，就能間接連帶改變content的內容，舉例來說有個div，我們指定它的data-text="我是預設文字"，然后放兩個按鈕，期望點選不同的按鈕，會更換content不同的內容。
<button id="b1">顯示 ABC</button> <button id="b2">顯示 123</button> <div data-text="我是預設文字">我是 div</div>
接著設定CSS，關鍵在使用content的attr，讓偽元素直接顯示父元素屬性的內容。
button{
font-size:16px;
}
div{
margin:10px;
font-size:20px;
}
div::before{
content: attr(data-text) '，';
}
最后就是JavaScript的部分，通過setAttribute更改div的屬性，就會看到content的內容修改了。
var b1 = document.getElementById('b1');
var b2 = document.getElementById('b2');
var d = document.querySelector('div');
b1.addEventListener('click',function(){
d.setAttribute('data-text','ABC');
});
b2.addEventListener('click',function(){
d.setAttribute('data-text','123');
});
雖然說我們可以通過JavaScript 來操控偽元素，但偽元素終究不是真正的網頁元素，也因此操作起來也不如基本操作網頁元素DOM 來的簡便，所以如果可以，還是盡量用正常的操控模式吧。
文章來源：https://www.oxxostudio.tw/articles/201706/pseudo-element-3.html
https://www.oxxostudio.tw/articles/201706/pseudo-element-4.html
原文作者：oxxostudio
由于網頁為繁體內容，術語描述和話術與我們有差異的問題，筆者在保證不改變原意的基礎上做了調整，把上述兩篇文章合成了一篇，并在此基礎上進行了錯誤校正，如發現問題，歡迎你的指正
關于偽元素的系列文章就介紹到這里，如果你喜歡此系列文章，麻煩各位點贊和轉發，謝謝啦。關于偽元素的用法，雖然說大部分的時候用不太到，但某些時候也不失為強化網頁效果、或是優化網頁結構的好方法。
、選中去除文本框文字，離開后顯示原有文字：
?<input name="key" type="text" id="key" value="關鍵詞" size="30" ??
? ? ? ? ? onmouseover=this.focus();this.select(); ?
? ? ? ? ? onclick="if(value==defaultValue){value='';this.style.color='#000'}" ??
? ? ? ? ? onBlur="if(!value){value=defaultValue;this.style.color='#999'}" style="color:#999" />
2、選中后方可編輯：
<input type="checkbox" name="tpbox" value="1" onclick="if(this.checked) {txtNo.disabled=false}else{txtNo.disabled=true}">你一定要幸福，我會好好的！
你的姓名：<input type="text" name="txtNo" size="20" value="選中前面的選項方可編輯" disabled>
3、點擊鏈接后方可編輯：
<a href="#" onclick="username.readOnly=false;alert('你好，歡迎使用！')">先點擊我哦！</a>
你的姓名：<input id="username" value="--請輸入--" size="30" readOnly>
4、輸入框從中間輸入：從中間輸入：
<input type="text" name="mid"style="text-align:center;">
5、輸入框變色：輸入框改變變色：
<input type="text" size="20" style="background-color:#FFFFFF"
? ? ? ? ? ? onfocus="style.backgroundColor='#FFFF00'"
? ? ? ? ? ? onblur="style.backgroundColor='#FFFFFF'">
6、輸入框只能輸入數字（用的是正則表達式）：你 的年齡：
<input onkeyup="value=value.replace(/[^\d]/g,'') "
? ? ? ? onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))">
7、輸入框只能輸入中文（用的是正則表達式）：你的中文名：
<input onkeyup="value=value.replace(/[ -~]/g,'')" onkeydown="if(event.keyCode==13)event.keyCode=9">
8、只能輸入英文和數字（用的是正則表達式）：
你 的昵稱：<input onkeyup="value=value.replace(/[\W]/g,'') "
? ? ? ? onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))"
? ? ? ? onkeydown="if(event.keyCode==13)event.keyCode=9">
9、輸入框不能編輯，但表單可以獲得輸入框內的值：
<input type="text" value="afreon" onclick="alert('總和不能編輯！');" onfocus="this.blur()" />
<input type="text" value="afreon" onclick="alert(this.value);" readonly />
<input value="不可修改" ?readonly= "true" type="text"/>//:字體顏色為黑體
10、輸入框不能編輯，并且表單不能獲得輸入框內的值
<input value="不可修改" disabled="disabled" ?type="text"/>//:字體顏色為灰體
11、輸入框禁止輸入法：
<input onpaste="return false" style="ime-mode:disabled">
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
