使用CSS灰显图像？

Question

使用CSS使图像显示为"灰显"(即,不加载图像的单独灰色版本)的最佳方法(如果有的话)是什么？

我的上下文是我在一个表中有行,在最右边的单元格中都有按钮,有些行需要看起来比其他行更亮.因此,当然我可以轻松地使字体更轻,但我也想让图像更轻,而无需管理每个图像的两个版本.

Answer 1

它必须是灰色的吗？您可以将图像的不透明度设置为较低(使其变钝).或者,您可以创建<div>叠加并将其设置为灰色(更改Alpha以获得效果).

• HTML:

  <div id="wrapper">
      <img id="myImage" src="something.jpg" />
  </div>
  

• CSS:

  #myImage {
      opacity: 0.4;
      filter: alpha(opacity=40); /* msie */
  }
  
  /* or */
  
  #wrapper {
      opacity: 0.4;
      filter: alpha(opacity=40); /* msie */
      background-color: #000;
  }
  

Answer 2

使用CSS3过滤器属性:

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

浏览器支持有点不好,但它是100%的CSS.有关CSS3过滤器属性的精彩文章,请访问:http://blog.nmsdvid.com/css-filter-property/

Answer 3

你在这里:

<a href="#"><img src="img.jpg" /></a>

Css Gray:

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过滤器,也不支持灰度过滤器的前缀版本.您可以修复它,使用以下两种解决方案中的一种:

1. 使用IE9标准模式将IE10 +设置为使用头部中的以下元素元素进行渲染: <meta http-equiv="X-UA-Compatible" content="IE=9">
2. 在IE10中使用SVG覆盖来完成灰度级Internet Explorer 10 - 如何应用灰度过滤器？

Answer 4

如果您不介意使用一些JavaScript,jQuery的fadeTo()可以很好地适用于我尝试过的每个浏览器.

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

Answer 5

更好地支持所有浏览器:

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

Answer 6

变灰：

“消色差。”

filter: grayscale(100%);

filter: grayscale(100%);

@keyframes achromatization {
	0% {}
	25% {}
	75% {filter: grayscale(100%);}
	100% {filter: grayscale(100%);}
}

p {
	font-size: 5em;
	color: yellow;
	animation: achromatization 2s ease-out infinite alternate;
}
p:first-of-type {
	background-color: dodgerblue;
}

“用灰色填充。”

filter: contrast(0%);

<p>
	? Bzzzt!
</p>
<p>
	? Bzzzt!
</p>

filter: contrast(0%);

有用的笔记

• CSS3 滤镜灰度和饱和有什么区别？

• https://www.w3.org/TR/filter-effects-1