什么是最好的方法(如果有)，使图像显示“灰色”与CSS(即，没有加载一个单独的，灰色的图像版本)?
我的上下文是，我在一个表中有行，在最右边的单元格中都有按钮，一些行需要看起来比其他行更轻。所以我可以让字体更轻，当然，我也想让图像更轻，而不必管理每个图像的两个版本。
当前回答
如果您不介意使用一点JavaScript, jQuery的fadeTo()在我尝试过的每种浏览器中都能很好地工作。
jQuery(selector).fadeTo(speed, opacity);
其他回答
最好支持所有浏览器:
img.lessOpacity {
opacity: 0.4;
filter: alpha(opacity=40);
zoom: 1; /* needed to trigger "hasLayout" in IE if no width or height is set */
}
一定是灰色的吗?你可以把图像的不透明度调低一点(让它变暗)。或者，您可以创建一个<div>覆盖，并将其设置为灰色(更改alpha以获得效果)。
html: < div id = "包装" > <img id="myImage" src="something.jpg" /> < / div > css: # myImage { 透明度:0.4; 过滤器:α(不透明度= 40);/* msie */ ｝ /*或*/ #包装{ 透明度:0.4; 过滤器:α(不透明度= 40);/* msie */ background - color: # 000; ｝
如果您不介意使用一点JavaScript, jQuery的fadeTo()在我尝试过的每种浏览器中都能很好地工作。
jQuery(selector).fadeTo(speed, opacity);
变灰:
“使无色。”
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。
