Wie kann man ein Bild in ein Grauwertbild mit HTML/CSS umwandeln

Es gibt viele Möglichkeiten, Ihr Bild mithilfe von CSS in Grauwert umzuwandeln. In diesem Kapitel werden wir lernen, wie man ein farbiges Bild mithilfe von CSS-Eigenschaften in Grauwert umwandeln kann.

  1. Zuerst fügen Sie das Bild ins Tag <img> hinzu.
    2. Sie müssen das Bild in das Tag <img>, einfügen, um es zu konvertieren.
  2. Verwenden Sie dann den Wert grayscale der Eigenschaft filter, um Grauwert zu erzeugen. Die Eigenschaft filter wendet visuelle Effekte auf ein Element (Bild) an.

Werfen wir also einen Blick auf das folgende Beispiel, um die Details zu sehen:

Beispiel

<!DOCTYPE html> 
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style> 
      img { 
      -webkit-filter: grayscale(100%); 
      filter: grayscale(100%); 
      }          
    </style>
  </head>
  <body>
    <h2>Konvertieren eines Bildes in Grauwert mit HTML/CSS</h2>
    <img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" width="400" height="300" alt="tree" />   
  </body>
</html>

Ein anderes Beispiel ansehen:

Beispiel

<!DOCTYPE html> 
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style> 
      img { 
      -webkit-filter: grayscale(1); 
      filter: grayscale(1); 
      } 
      img:hover { 
      -webkit-filter: grayscale(0); 
      filter: none; 
      } 
      h1 { 
      color:green; 
      } 
    </style>
  </head>
  <body>
    <h2>Konvertieren eines Bildes in Grauwert mit HTML/CSS</h2>
    <img src=" /uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" 
      width="400" height="300" alt="tree" />   
  </body>
</html>
-Webkit- für Safari, Google Chrome und Opera (neuere Versionen) wird mit der Eigenschaft filter verwendet.

In den modernen Browsern gibt es eine neue Möglichkeit, das Bild in Grauwert darzustellen.

Die Eigenschaft background-blend-mode ermöglicht es Ihnen, einige interessante Effekte wie die Grauwertkonvertierung zu erzielen.

Der Wert luminosity mit einem weißen Hintergrund erlaubt das.

Beispiel

<!DOCTYPE html> 
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style> 
      .example{
      width: 400px;
      height: 300px;
      background: url("/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg"),  #fff;         
      background-size: cover;
      }
      .example:hover {
      background-blend-mode: luminosity;
      }
    </style>
  </head>
  <body>
    <h2>Konvertieren eines Bildes in Grauwert mit HTML/CSS</h2>
    <div class="example"></div>
  </body>
</html>

Sie können den Effekt mit 3 Ebenen-Animation einstellen. Das erste ist das Bild, und das zweite ist der weiß-schwarze Farbverlauf. Wenn Sie den Modus multiply anwenden, erhalten Sie wie bisher ein weißes Ergebnis auf dem weißen Teil, aber das Originalbild auf dem schwarzen Teil hat keine Wirkung.

Auf dem weißen Teil des Farbverlaufs erhalten Sie den gleichen Effekt wie zuvor. Auf dem schwarzen Teil des Farbverlaufs mischen Sie das Bild über sich selbst, und das Ergebnis ist das unveränderte Bild.

Beispiel

<!DOCTYPE html> 
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style> 
      div {
      width: 450px;
      height: 400px;
      }
      .example{
      background: url("/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg"), 
      linear-gradient(0deg, white 33%, black 66%), url("/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg"); 
      background-position: 0px 0px, 0px 0%, 0px 0px;
      background-size: cover, 100% 300%, cover;
      background-blend-mode: luminosity, multiply;
      transition: all 1.5s;
      }
      .example:hover {
      background-position: 0px 0px, 0px 70%, 0px 0px;
      }
    </style>
  </head>
  <body>
    <h2>Konvertieren eines Bildes in Grauwert mit HTML/CSS</h2>
    <div class="example"></div>
  </body>
</html>