Jaki jest najlepszy sposób (jeśli w ogóle), aby obraz wyglądał na „wyszarzony” za pomocą CSS (tj. Bez ładowania osobnej, wyszarzonej wersji obrazu)?

Moim kontekstem jest to, że mam wiersze w tabeli, z których wszystkie mają przyciski w najbardziej prawej komórce, a niektóre wiersze muszą wyglądać jaśniej niż inne. Oczywiście mogę łatwo rozjaśnić czcionkę, ale chciałbym również rozjaśnić obrazy bez konieczności zarządzania dwiema wersjami każdego obrazu.

Czy to musi być szare? Możesz po prostu zmniejszyć krycie obrazu (aby go stępić). Alternatywnie możesz utworzyć <div>nakładkę i ustawić ją na szarą (zmień alfa, aby uzyskać efekt).

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

Użyj właściwości filtru CSS3:

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

Obsługa przeglądarki jest trochę zła, ale w 100% CSS. Fajny artykuł na temat właściwości filtra CSS3 można znaleźć tutaj: http://blog.nmsdvid.com/css-filter-property/

Ty tutaj:

<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 */
    }

Znalazłem to na: http://zkiwi.com/topic/chuyen-hinh-mau-thanh-trang-den-bang-css-nhu-the-nao

Edycja: IE10 + nie obsługuje filtrów DX, podobnie jak IE9 i wcześniejsze, ani nie obsługuje prefiksowanej wersji filtra w skali szarości. Możesz to naprawić, użyj jednego z dwóch poniższych rozwiązań:

1. Ustaw IE10 +, aby renderował w trybie standardów IE9, używając następującego elementu meta w nagłówku: <meta http-equiv="X-UA-Compatible" content="IE=9">
2. Użyj nakładki SVG w IE10, aby uzyskać przeglądarkę Internet Explorer 10 w odcieniach szarości - jak zastosować filtr w skali szarości?

Jeśli nie masz nic przeciwko użyciu odrobiny JavaScript, fadeTo () jQuery działa dobrze w każdej przeglądarce, której wypróbowałem.

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

Lepiej obsługiwać wszystkie przeglądarki:

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

Oto przykład, który pozwala ci ustawić kolor tła. Jeśli nie chcesz używać pływaka, może być konieczne ręczne ustawienie szerokości i wysokości. Ale nawet to naprawdę zależy od otaczającego 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>

Aby wyszarzyć:

„Achromatyzować”.

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>

„Wypełnić szarym”.

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>

Przydatne notatki

• Jaka jest różnica między skalą szarości filtra CSS3 a nasyceniem?

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

Możesz użyć rgba()w css, aby zdefiniować kolor zamiast rgb(). Lubię to: style='background-color: rgba(128,128,128, 0.7);

Daje ci ten sam kolor, rgb(128,128,128)ale z 70% kryciem, więc rzeczy za nim pokazują tylko 30%. CSS3, ale działa w większości przeglądarek od 2008 roku. Niestety, nie znam żadnej składni #rrggbb. Graj liczbami - możesz myć bielą, cień szarością, czymkolwiek chcesz rozcieńczyć.

OK, więc utworzysz prostokąt w półprzezroczystej szarości (lub dowolnym innym kolorze) i położysz go na obrazie, być może z pozycją: absolutną i wskaźnikiem Z wyższym niż zero, i umieścisz go tuż przed obrazem i domyślnym lokalizacja prostokąta będzie tym samym lewym górnym rogiem obrazu. Powinno działać.

Biorąc pod uwagę filtr: wyrażenie jest rozszerzeniem Microsoft CSS, więc będzie działać tylko w Internet Explorerze. Jeśli chcesz to wyszarzyć, zalecam ustawienie jego krycia na 50% za pomocą odrobiny javascript.

Dobrze byłoby zacząć od http://lyxus.net/mv , ponieważ omawia on skrypt krycia, który działa z przeglądarkami Firefox, Safari, KHTML, Internet Explorer i CSS3.

Możesz także nadać mu szarą ramkę.