Question

我正在尝试灰度显示image，这是我正在使用的代码：

＆＃13;

/* Latest compiled and minified CSS included as External Resource*/

/* Optional theme */
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');

body {
    margin: 10px;
}
	.comment{
		margin-left: 50px;
	}

	img.resize{
	    width:40px;
	    height: auto;
	}
  
  img {
	  filter: gray; /* IE6-9 */
	  filter: grayscale(1); /* Microsoft Edge and Firefox 35+ */
	  -webkit-filter: grayscale(1);
	}

＆＃13;

<img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-arrow-up-b-128.png" class="img-responsive resize">

＆＃13;

但它不起作用。有什么想法吗？

Here我有一个例子。

Answer 1

你试图对已经是黑白的image进行灰度调整，所以尝试对彩色图像进行灰度图像处理，将其悬停在image上再回到彩色

/* Latest compiled and minified CSS included as External Resource*/

/* Optional theme */

@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
 body {
  margin: 10px;
}
.comment {
  margin-left: 50px;
}
img.resize {
  width: 40px;
  height: auto;
}
img {
  filter: gray;
  /* IE6-9 */
  filter: grayscale(100%);
  /* Microsoft Edge and Firefox 35+ */
  -webkit-filter: grayscale(1);
}

img:hover {
  filter:0;
  /* IE6-9 */
  filter: grayscale(0%);
  /* Microsoft Edge and Firefox 35+ */
  -webkit-filter: grayscale(0);
}

<img src="http://lorempixel.com/50/50" class="img-responsive resize">

灰度css不工作在chrome或firefox或小提琴

1 个答案: