CSS3是一種用于網頁設計的標記語言。它可以增強網頁的視覺效果,其中一項功能就是圖片過濾。圖片過濾是一個簡單的方法,可以改變圖片的顏色、對比度、亮度和模糊程度,以及給圖片增加多種效果。
使用CSS3來改變圖片的效果非常簡單。在CSS3中,通過filter屬性來實現圖片過濾。下面是一些可以使用的值:
img { filter: blur(5px); /* 模糊程度 */ filter: brightness(50%); /* 亮度 */ filter: contrast(200%); /* 對比度 */ filter: grayscale(100%); /* 灰度 */ filter: hue-rotate(90deg); /* 色相 */ filter: invert(100%); /* 反相 */ filter: opacity(50%); /* 透明度 */ filter: saturate(200%); /* 飽和度 */ filter: sepia(100%); /* 棕黑色 */ }
當然,您也可以通過組合使用過濾器來創建自己的效果。這是一些例子:
/* 黑白圖片 */ .img1 { filter: grayscale(100%) contrast(150%); } /* 紅色陰影圖片 */ .img2 { filter: saturate(50%) brightness(80%) sepia(100%) drop-shadow(20px 20px 10px red); }
圖片過濾可以用于增強網站的視覺效果,也可以用于創建一些令人印象深刻的圖片效果。無論使用何種方式,使用CSS3過濾器都將幫助您創建出獨一無二的網站。
上一篇--php調用--