iT邦幫忙

1

鼠年全馬鐵人挑戰 WEEK 14: 我想亮白、我想復古、我想___?CSS filter

CSS filter簡單來說就是濾鏡功能,以下整理幾個常用的功能。

1.blur模糊(px)

越大越模糊,如果想要朦朧美就參考這個吧!
https://ithelp.ithome.com.tw/upload/images/20200517/20124879glczss8Kzt.png
filter:blur(2px);

2.brightness亮度(%)

  • 100%表示不變
  • 小於100%是減少亮度
  • 大於100%則是增加亮度
  • 設成0%會讓影像完全變黑。
    https://ithelp.ithome.com.tw/upload/images/20200517/20124879glzTnTlsKc.png
    filter:brightness(1.5);

3.grayscale灰階(%)

2020發生許多憾事,舉凡黑鷹事件、武漢肺炎、Kobe過世。RIP!

  • 0% 原始影像
  • 100% 完整的灰白照片
    https://ithelp.ithome.com.tw/upload/images/20200517/20124879zIpy8AoRCd.png
    filter:grayscale(1);

4.opacity不透明(%)

就是影像不透明的程度。

  • 0完全透明
  • 1就是原始圖
    https://ithelp.ithome.com.tw/upload/images/20200517/201248796VV3ItfMRS.png
    filter:opacity(.5);

5.sepia 懷舊(%)

想要有走復古風就選這個吧!

  • 0% 原圖
  • 100% 完整的泛黃顏色
    https://ithelp.ithome.com.tw/upload/images/20200517/20124879m9yHzViOXl.png
    filter:sepia(1);

6.saturate飽和(%)

  • 100%表示不變
  • 小於100%降低飽和度
  • 大於100%增加飽和度
    https://ithelp.ithome.com.tw/upload/images/20200517/20124879b0MyRWlQpU.png
    filter:saturate(1.2);

我們可以利用filter使:hover效果更豐富。
:hover範例
最後我們要瞭解,知道跟可以用是兩回事,filter不支援IE、filter不支援IE,
很重要所以說兩次!
附上Can I use


圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言