Серая картинка с CSS?

Question

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

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

Answer 1

Должен ли он быть серым? Вы можете просто установить непрозрачность изображения ниже (чтобы она была тусклой). В качестве альтернативы вы можете создать оверлей <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;
  }
  

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 filter вы можете найти здесь: http://blog.nmsdvid.com/css-filter-property/

Answer 3

Ваш здесь:

<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 - как применить фильтр в градациях серого?

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

Вот пример, который позволяет вам установить цвет фона. Если вы не хотите использовать 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>

Answer 7

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

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

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

Answer 8

серым цветом:

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

filter: grayscale(100%);

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

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

<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 {
	background-color: dodgerblue;
	font-size: 5em;
	color: yellow;
	animation: gray-filling 5s ease-out infinite alternate;
}

<p>
	⚡ Bzzzt!
</p>

---

Полезные заметки

• В чем разница между серой шкалой CSS3 и насыщенностью?

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

Answer 9

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

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

Возможно, вы также захотите задать для него серую рамку.