Saber 酱的抱枕

Fly me to the moon

03/8
2018
学习

CSS3的灰度滤镜grayscale

测试文字测试文字测试文字

有时候网页上需要做一些黑白切换效果,比如分享按钮,原本是灰色的,鼠标放上去的时候再变成彩色的。

传统办法是准备两张图,一张灰色的一张彩色的,用切换图片或者背景定位(background-position)来实现。

在CSS3里就很方便了,只需要准备一张彩色图片,在需要用灰度的时候应用grayscale滤镜即可(并且grayscale滤镜还可以用于文字等其他元素)。

上面效果的代码:

<style>
	.css3_gray{filter: grayscale(100%);transition: all .3s ease;}
	.css3_gray:hover{filter:none;}
</style>
<p style="color:#ef457e;" class="css3_gray">测试文字测试文字测试文字</p>
<img src="/f/fenxiang1.jpg" alt="" class="css3_gray">

兼容性:
各大浏览器均可,除了IE全系列(没错,IE11也不支持css3滤镜)

可爱的小菇凉(pid=63965945)

CSS3的灰度滤镜grayscale

  1. Google Chrome 65Google Chrome 65Windows 10/11Windows 10/11

    saber酱,请教下域名是怎么去掉www的,一般因应该会指向www.saber.love的呀

    回复
    1. saber 文章作者
      Google Chrome 65Google Chrome 65Windows 7 x64 EditionWindows 7 x64 Edition

      域名解析的时候不做www的解析就行了。只做@解析(就是主域名了)。

      回复
  2. 沐沐
    Sogou ExplorerSogou ExplorerWindows 10/11Windows 10/11

    最近在学c语言,saber分享的c语言知识东西我要全部去吃透!(づ ̄3 ̄)づ╭❤~

    回复
  3. Ending
    Google Chrome 11Google Chrome 11Windows XPWindows XP

    我的浏览器黑名单:2345系列浏览器,360系列浏览器,2345系列浏览器,360系列浏览器

    回复
    1. saber 文章作者
      Google Chrome 65Google Chrome 65Windows 7 x64 EditionWindows 7 x64 Edition

      chrome就够了,chrome是最好的 ε=ε=(ノ≧∇≦)ノ

      回复
      1. Ending
        Google Chrome 64Google Chrome 64Android 7.0Android 7.0

        但是有些东西还是得用其他浏览器(坑比队友的锅)chrome才是王道,不用chrome的都踢了(ಡωಡ)

        回复

评论 沐沐 撤销评论