css中filter過濾修改圖片
阿新 • • 發佈：2018-12-02
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> .img{ /* filter:blur( ) 高斯模糊 */ /* filter:blur(2px) ; */ /* brightness(%) 線性乘法可以讓圖片看起來更亮或者更暗 */ /* filter:brightness(70%); */ /* contrast(%) 對比度調整影象的對比度。 */ /* filter:contrast(50%); drop-shadow(h-shadow v-shadow blur spread color) 給影象設定一個陰影效果。陰影是合成在影象下面，可以有模糊度的，可以以特定顏色畫出的遮罩圖的偏移版本。 函式接受<shadow>(在CSS3背景中定義)型別的值，除了"inset"關鍵字是不允許的。該函式與已有的box-shadow box-shadow屬性很相似；不同之處在於，通過濾鏡，一些瀏覽器為了更好的效能會提供硬體加速 利用這個方案，我們其實改變類似於一些圖示的顏色，比如黑色的圖示變成藍色的圖示。 */ /* filter: drop-shadow(705px 0 0 #ccc); */ /* hue-rotate(deg) 色相旋轉 */ /* filter:hue-rotate(70deg); invert(%) 反轉,這個函式的作用是反轉輸入影象，有點像曝光的效果 */ /* filter:invert(100%) grayscale(%) 將影象轉換為灰度影象,這個效果可以將圖片做舊，有一種時代滄桑感。喜歡古風的人一定會喜歡上這個效果的 */ /* filter:grayscale(80%); */ /* filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); */ /* sepia(%) 將影象轉換為深褐色下面給我一個暖暖的色調。 */ /* filter:sepia(50%); */ filter:url(#change); } </style> </head> <body> <!-- <svg height="0" xmlns="http://www.w3.org/2000/svg"> <defs> <filter id="change"> <feColorMatrix type="matrix" values=" 0 0 0 0 0.55 0 0 0 0 0.23 0 0 0 0 0 0 0 0 0 1" /> </filter> </defs> </svg> --> <svg height="0" xmlns="http://www.w3.org/2000/svg"> <defs> <filter id="change"> <feColorMatrix values="3 -1 -1 0 0 -1 3 -1 0 0 -1 -1 3 0 0 0 0 0 1 0" /> </filter> </defs> </svg> <img src="img/list.jpg" class="img"> </body> </html>