变灰:

“使无色。”

filter: grayscale(100%);

@关键帧消色{ 0% {} 25% {} 75%{滤镜:灰度(100%);} 100%{滤镜:灰度(100%);} ｝ p { 字体大小:5 em; 颜色:黄色; 动画:消色差2s缓和无限交替; ｝ p: first-of-type { background - color: dodgerblue; ｝ < p > ⚡Bzzzt ! < / p > < p > ⚡Bzzzt ! < / p >

“用灰色填满。”

filter: contrast(0%);

@keyframes gray-filling { 0% {} 25% {} 50% {filter: contrast(0%);} 60% {filter: contrast(0%);} 70% {filter: contrast(0%) brightness(0%) invert(100%);} 80% {filter: contrast(0%) brightness(0%) invert(100%);} 90% {filter: contrast(0%) brightness(0%);} 100% {filter: contrast(0%) brightness(0%);} } p { font-size: 5em; color: yellow; animation: gray-filling 5s ease-out infinite alternate; } p:first-of-type { background-color: dodgerblue; } <p> ⚡ Bzzzt! </p> <p> ⚡ Bzzzt! </p>

有用的笔记

CSS3滤镜灰度和饱和度有什么区别? https://www.w3.org/TR/filter-effects-1

最好支持所有浏览器:

img.lessOpacity {               
   opacity: 0.4;
   filter: alpha(opacity=40);
   zoom: 1;  /* needed to trigger "hasLayout" in IE if no width or height is set */ 
}

变灰:

“使无色。”

filter: grayscale(100%);

@关键帧消色{ 0% {} 25% {} 75%{滤镜:灰度(100%);} 100%{滤镜:灰度(100%);} ｝ p { 字体大小:5 em; 颜色:黄色; 动画:消色差2s缓和无限交替; ｝ p: first-of-type { background - color: dodgerblue; ｝ < p > ⚡Bzzzt ! < / p > < p > ⚡Bzzzt ! < / p >

“用灰色填满。”

filter: contrast(0%);

@keyframes gray-filling { 0% {} 25% {} 50% {filter: contrast(0%);} 60% {filter: contrast(0%);} 70% {filter: contrast(0%) brightness(0%) invert(100%);} 80% {filter: contrast(0%) brightness(0%) invert(100%);} 90% {filter: contrast(0%) brightness(0%);} 100% {filter: contrast(0%) brightness(0%);} } p { font-size: 5em; color: yellow; animation: gray-filling 5s ease-out infinite alternate; } p:first-of-type { background-color: dodgerblue; } <p> ⚡ Bzzzt! </p> <p> ⚡ Bzzzt! </p>

有用的笔记

CSS3滤镜灰度和饱和度有什么区别? https://www.w3.org/TR/filter-effects-1

使用CSS3过滤器属性:

img {
    -webkit-filter: grayscale(100%);
       -moz-filter: grayscale(100%);
         -o-filter: grayscale(100%);
        -ms-filter: grayscale(100%);
            filter: grayscale(100%); 
}

浏览器支持相当不错，https://caniuse.com/css-filters。

考虑filter:expression是微软对CSS的扩展，所以它只能在Internet Explorer中工作。如果你想让它变灰，我建议你使用javascript将它的不透明度设置为50%。

http://lyxus.net/mv是一个很好的开始，因为它讨论了不透明度 脚本，适用于Firefox, Safari, KHTML, Internet Explorer和CSS3浏览器。

你可能还想给它一个灰色边框。

如果您不介意使用一点JavaScript, jQuery的fadeTo()在我尝试过的每种浏览器中都能很好地工作。

jQuery(selector).fadeTo(speed, opacity);