Каков наилучший способ (если есть), чтобы изображение выглядело «серым» с помощью CSS (т.е. без загрузки отдельной, серой версии изображения)?

Мой контекст заключается в том, что у меня есть строки в таблице, у всех из которых есть кнопки в самой правой ячейке, и некоторые строки должны выглядеть светлее, чем другие. Поэтому я, конечно, могу сделать шрифт легче, но я бы также хотел сделать изображения светлее без необходимости управлять двумя версиями каждого изображения.

Это должно быть серым? Вы можете просто установить непрозрачность изображения ниже (чтобы она была тусклой). Кроме того, вы можете создать <div>наложение и установить его на серый (измените альфа, чтобы получить эффект).

• 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;
  }

Используйте свойство фильтра 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/

Ваш здесь:

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

Css Grey:

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 + не поддерживает фильтры DX, как это было в IE9 и более ранних версиях, а также не поддерживает префиксную версию фильтра оттенков серого. Вы можете это исправить, используйте одно из двух решений ниже:

1. Установите IE10 + для рендеринга в режиме стандартов IE9, используя следующий метаэлемент в заголовке: <meta http-equiv="X-UA-Compatible" content="IE=9">
2. Используйте SVG-оверлей в IE10 для создания Internet Explorer в градациях серого 10 - как применить фильтр в градациях серого?

Если вы не возражаете против использования немного 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 */ 
}

Вот пример, который позволяет вам установить цвет фона. Если вы не хотите использовать float, вам может потребоваться установить ширину и высоту вручную. Но даже это действительно зависит от окружающего 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>

Выделить серым цветом:

«Ахроматизировать».

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;
}

<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

Вы можете использовать rgba()в CSS, чтобы определить цвет вместоrgb() . Как это: style='background-color: rgba(128,128,128, 0.7);

Дает вам тот же цвет, что и rgb(128,128,128) но с непрозрачностью 70%, так что материал позади показывает только 30%. CSS3, но он работает в большинстве браузеров с 2008 года. Извините, нет синтаксиса #rrggbb, о котором я знаю. Поиграйте с числами - вы можете размыть белым, затенить серым, чем хотите разбавить.

Итак, вы делаете прямоугольник полупрозрачного серого (или любого другого цвета) и кладете его поверх вашего изображения, возможно, с помощью position: absolute и z-index выше нуля, и вы помещаете его непосредственно перед вашим изображением и по умолчанию Место для прямоугольника будет таким же, как верхний левый угол вашего изображения. Должно сработать.

Учитывая фильтр: выражение является расширением Microsoft для CSS, поэтому оно будет работать только в Internet Explorer. Если вы хотите выделить его серым цветом, я бы порекомендовал установить его непрозрачность на 50%, используя немного JavaScript.

http://lyxus.net/mvБыло бы неплохо начать с , потому что в нем обсуждается сценарий прозрачности, который работает с браузерами с поддержкой Firefox, Safari, KHTML, Internet Explorer и CSS3.

Вы могли бы также хотеть дать этому серую границу.