Який найкращий спосіб (якщо такий є), щоб зображення виглядало "сірим" за допомогою 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-фільтри, як це було зроблено раніше, а також не підтримує попередньо встановлену версію фільтра сірого масштабу. Ви можете виправити це, використовуйте один із двох рішень нижче:

1. Встановіть IE10 + для візуалізації в режимі стандартів IE9, використовуючи наступний мета елемент у голові: <meta http-equiv="X-UA-Compatible" content="IE=9">
2. Використовуйте накладку SVG в IE10, щоб здійснити Інтернет-провідник сірого масштабу 10 - як застосувати фільтр сірого масштабу ?

Якщо ви не заперечуєте над тим, щоб використовувати трохи JavaScript, 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, про який я знаю. Пограйте з цифрами - ви можете вимити білим кольором, затінити сірим кольором все, що хочете розбавити.

Гаразд, ви зробите прямокутник aa в напівпрозорому сірому (або будь-якому кольорі) і викладете його зверху на зображення, можливо, з позицією: абсолютний та z-індекс, що перевищує нуль, і ви поставите його безпосередньо перед вашим зображенням та типовим місце для прямокутника буде таким самим лівим верхнім кутом вашого зображення. Треба працювати.

Враховуючи фільтр: вираз є розширенням Microsoft для CSS, тому він працюватиме лише в Internet Explorer. Якщо ви хочете вимкнути його, я рекомендую встановити його непрозорість на 50%, використовуючи трохи JavaScript.

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

Ви також можете надати їй сіру межу.