it-swarm.com.de

Graues Bild mit CSS?

Was ist der beste Weg (falls vorhanden), um ein Bild mit CSS "ausgegraut" erscheinen zu lassen (d. H. 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 von jedem Bild verwalten zu müssen.

168
Richard Poirier

Muss es grau sein? Sie können einfach die Deckkraft des Bildes verringern (um es zu trüben). Alternativ können Sie eine <div> - Überlagerung erstellen und diese grau einstellen (ä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;
    }
    
220
Owen

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 ein bisschen schlecht, aber es ist 100% CSS. Einen schönen Artikel über die CSS3-Filtereigenschaft finden Sie hier: http://blog.nmsdvid.com/css-filter-property/

170
nmsdvid

Sie sind 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üher noch eine vorangestellte Version des Graustufenfilters. Sie können das Problem beheben, indem Sie eine der beiden folgenden 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 eine SVG-Überlagerung in IE10, um die Graustufenskalierung durchzuführen Internet Explorer 10 - Anwenden des Graustufenfilters?
51
Sakata Gintoki

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

jQuery(selector).fadeTo(speed, opacity);
24
Nathan Long

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

In diesem Beispiel können Sie die Farbe des Hintergrunds festlegen. Wenn Sie float nicht verwenden möchten, müssen Sie die Breite und Höhe möglicherweise 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>
3
Dave Jensen

Grau machen:

"Zu 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 Hinweise

Sie können rgba() in css verwenden, um eine Farbe anstelle von rgb() zu definieren. Wie folgt: 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 dahinterliegende Material nur bis zu 30% anzeigt. CSS3, aber es funktioniert in den meisten Browsern seit 2008. Sorry, keine #rrggbb-Syntax, die ich kenne. Spielen Sie mit den Zahlen - Sie können mit Weiß auswaschen, Schatten mit Grau, mit was auch immer Sie verdünnen möchten.

OK, du machst ein Rechteck in halbtransparentem Grau (oder welcher Farbe auch immer) und legst es auf dein Bild, vielleicht mit der Position: Absolut und einem Z-Index höher als Null, und setzt es direkt vor dein Bild und den Standard Die Position für das Rechteck befindet sich in der linken oberen Ecke Ihres Bildes. Sollte arbeiten.

1
OsamaBinLogin

In Anbetracht von filter: expression handelt es sich um eine Erweiterung von Microsoft für CSS, die nur in Internet Explorer funktioniert. Wenn Sie es grau machen möchten, würde ich empfehlen, dass Sie die Deckkraft mit etwas Javascript auf 50% setzen.

http://lyxus.net/mv wäre ein guter Anfang, da hier ein Opazitätsskript beschrieben wird, das mit Browsern mit Firefox-, Safari-, KHTML-, Internet Explorer- und CSS3-Unterstützung funktioniert.

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

0
VonC