Was ist der beste Weg (falls vorhanden), um ein Bild mit CSS "ausgegraut" erscheinen zu lassen (dh ohne eine separate, ausgegraute Version des Bildes zu laden)?

Mein Kontext ist, dass ich Zeilen in einer Tabelle habe, die alle Schaltflächen in der Zelle ganz rechts haben, und einige Zeilen müssen heller aussehen als andere. So kann ich die Schrift natürlich leichter machen, aber ich möchte auch die Bilder heller machen, ohne zwei Versionen jedes Bildes verwalten zu müssen.

Muss es grau sein? Sie können die Deckkraft des Bildes einfach verringern (um es zu trüben). Alternativ können Sie eine <div>Überlagerung erstellen und diese als grau festlegen (ändern Sie das Alpha, um den Effekt zu erzielen).

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

Verwenden Sie die CSS3-Filtereigenschaft:

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

Die Browserunterstützung ist etwas schlecht, aber es ist 100% CSS. Einen schönen Artikel über die CSS3-Filtereigenschaft finden Sie hier: http://blog.nmsdvid.com/css-filter-property/

Du bist hier:

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

CSS Grau:

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

Ich fand es unter: http://zkiwi.com/topic/chuyen-hinh-mau-thanh-trang-den-bang-css-nhu-the-nao

Bearbeiten: IE10 + unterstützt weder DX-Filter wie IE9 und frühere Versionen noch eine vorangestellte Version des Graustufenfilters. Sie können das Problem beheben, indem Sie eine von zwei Lösungen verwenden:

1. Stellen Sie IE10 + so ein, dass es im IE9-Standardmodus mit dem folgenden Metaelement im Kopf gerendert wird: <meta http-equiv="X-UA-Compatible" content="IE=9">
2. Verwenden Sie ein SVG-Overlay in IE10, um den Graustufen- Internet-Explorer 10 auszuführen. Wie wird ein Graustufenfilter angewendet?

Wenn es Ihnen nichts ausmacht, ein bisschen JavaScript zu verwenden, funktioniert jQuerys fadeTo () in jedem Browser, den ich ausprobiert habe.

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

Besser alle Browser unterstützen:

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

Hier ist ein Beispiel, mit dem Sie die Farbe des Hintergrunds festlegen können. Wenn Sie float nicht verwenden möchten, müssen Sie möglicherweise Breite und Höhe manuell einstellen. Aber auch das hängt wirklich vom umgebenden CSS / HTML ab.

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

Zum Ausgrauen:

"Achromatisieren."

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>

"Mit Grau füllen."

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>

Hilfreiche Notizen

• Was ist der Unterschied zwischen CSS3-Filter-Graustufen und Sättigung?

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

Sie können rgba()in CSS verwenden, um eine Farbe anstelle von zu definieren rgb(). So was: style='background-color: rgba(128,128,128, 0.7);

Gibt Ihnen die gleiche Farbe wie, rgb(128,128,128)jedoch mit einer Deckkraft von 70%, sodass das Material dahinter nur bis zu 30% zeigt. CSS3 funktioniert aber seit 2008 in den meisten Browsern. Entschuldigung, keine mir bekannte # rrggbb-Syntax. Spielen Sie mit den Zahlen - Sie können mit Weiß auswaschen, mit Grau schattieren, mit was auch immer Sie verdünnen möchten.

OK, Sie erstellen ein Rechteck in halbtransparentem Grau (oder einer anderen Farbe) und legen es auf Ihr Bild, möglicherweise mit der Position: absolut und einem Z-Index höher als Null. Sie platzieren es direkt vor Ihrem Bild und dem Standard Die Position für das Rechteck ist dieselbe linke obere Ecke Ihres Bildes. Sollte arbeiten.

Filter berücksichtigen: expression ist eine Microsoft-Erweiterung für CSS und funktioniert daher nur in Internet Explorer. Wenn Sie es ausgrauen möchten, würde ich empfehlen, dass Sie die Deckkraft mit etwas Javascript auf 50% einstellen.

http://lyxus.net/mv ist ein guter Ausgangspunkt, da hier ein Opazitätsskript beschrieben wird, das mit Firefox-, Safari-, KHTML-, Internet Explorer- und CSS3-fähigen Browsern funktioniert.

Vielleicht möchten Sie ihm auch einen grauen Rand geben.