什么是最好的方法(如果有)，使图像显示“灰色”与CSS(即，没有加载一个单独的，灰色的图像版本)?
我的上下文是，我在一个表中有行，在最右边的单元格中都有按钮，一些行需要看起来比其他行更轻。所以我可以让字体更轻，当然，我也想让图像更轻，而不必管理每个图像的两个版本。
当前回答
你在这里:
<a href="#"><img src="img.jpg" /></a>
Css灰色:
img{
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */}
Ungray:
a:hover img{
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
filter: grayscale(0%);
-moz-filter: grayscale(0%);
-ms-filter: grayscale(0%);
-o-filter: grayscale(0%);
filter: none ; /* IE6-9 */
zoom:1; /* needed to trigger "hasLayout" in IE if no width or height is set */
-webkit-filter: grayscale(0%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
}
我在http://zkiwi.com/topic/chuyen-hinh-mau-thanh-trang-den-bang-css-nhu-the-nao找到了它
编辑:IE10+不像IE9和更早的版本那样支持DX过滤器，也不支持带前缀的灰度过滤器。 你可以使用以下两种解决方案中的一种来解决它:
将IE10+设置为使用IE9标准模式，在头部使用以下元元素:<meta http-equiv="X-UA-Compatible" content="IE=9"> 使用SVG覆盖在IE10来完成灰度internet explorer 10 -如何应用灰度过滤器?
其他回答
你在这里:
<a href="#"><img src="img.jpg" /></a>
Css灰色:
img{
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */}
Ungray:
a:hover img{
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
filter: grayscale(0%);
-moz-filter: grayscale(0%);
-ms-filter: grayscale(0%);
-o-filter: grayscale(0%);
filter: none ; /* IE6-9 */
zoom:1; /* needed to trigger "hasLayout" in IE if no width or height is set */
-webkit-filter: grayscale(0%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
}
我在http://zkiwi.com/topic/chuyen-hinh-mau-thanh-trang-den-bang-css-nhu-the-nao找到了它
编辑:IE10+不像IE9和更早的版本那样支持DX过滤器，也不支持带前缀的灰度过滤器。 你可以使用以下两种解决方案中的一种来解决它:
将IE10+设置为使用IE9标准模式，在头部使用以下元元素:<meta http-equiv="X-UA-Compatible" content="IE=9"> 使用SVG覆盖在IE10来完成灰度internet explorer 10 -如何应用灰度过滤器?
下面是一个让你设置背景颜色的例子。如果你不想使用浮动，那么你可能需要手动设置宽度和高度。但这也取决于CSS/HTML。
<style>
#color {
background-color: red;
float: left;
}#opacity {
opacity : 0.4;
filter: alpha(opacity=40);
}
</style>
<div id="color">
<div id="opacity">
<img src="image.jpg" />
</div>
</div>
最好支持所有浏览器:
img.lessOpacity {
opacity: 0.4;
filter: alpha(opacity=40);
zoom: 1; /* needed to trigger "hasLayout" in IE if no width or height is set */
}
使用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。
你可以在css中使用rgba()来定义颜色，而不是rgb()。是这样的: Style ='background-color: rgba(128,128,128,0.7);
给你相同的颜色rgb(128,128,128)，但与70%的不透明度，所以后面的东西只显示通过30%。CSS3，但自2008年以来，它在大多数浏览器中都有效。对不起，我不知道#rrggbb语法。玩弄数字——你可以用白色来洗去，用灰色来阴影，用任何你想稀释的东西。
好的，所以你做了一个半透明灰色(或任何颜色)的矩形，并把它放在你的图像的顶部，可能与position:absolute和z-index大于零，你把它放在你的图像之前，矩形的默认位置将是你的图像的左上角。应该工作。
