Wie entferne ich Füllfarben, um die Bildfarbe mithilfe von HTML und CSS zu ändern?

In der Welt der Webentwicklung ist die Kenntnis der neuesten CSS- und HTML-Technologien von entscheidender Bedeutung, um Ihrer Website atemberaubende Grafiken hinzuzufügen. Ein solcher Effekt ist der Color Drop-Effekt, der es Ihnen ermöglicht, die Farbe eines Bildes beim Schweben zu ändern, indem Sie eine Füllfarbe darüber platzieren.

Mit diesem Effekt können Sie Ihre Website interaktiver und attraktiver für Ihre Besucher gestalten. In diesem Artikel führen wir Sie durch den Prozess der Erstellung eines Farbtropfeneffekts mithilfe von HTML und CSS. Egal, ob Sie Anfänger oder erfahrener Webentwickler sind, bleiben Sie auf dem Laufenden, um mehr über dieses aufregende Bild zu erfahren.

Was ist der Drop-Fill-Farbeffekt?

Der Tropfenfüllfarbeneffekt ist ein visueller Effekt, der mithilfe von HTML und CSS auf ein Bild oder eine Grafik angewendet wird und dazu führt, dass ein Farbtropfen auf dem Bild erscheint, wenn die Maus darüber bewegt wird, wodurch das Bild seine Farbe ändert.

Dieser Effekt erzeugt die Illusion, dass Farben auf das Bild tropfen und sich darüber ausbreiten, wodurch ein dramatischer und dynamischer Effekt entsteht. Dieser Effekt kann genutzt werden, um einer Website Interaktivität und visuelle Attraktivität zu verleihen und so die Benutzer stärker einzubeziehen.

Um diesen Effekt zu erzielen, müssen wir bestimmte Eigenschaften nutzen, sehen wir sie uns einzeln an -

• Filter-Eigenschaft – Die filter-Eigenschaft in CSS wird verwendet, um visuelle Effekte auf den Inhalt eines Elements anzuwenden. Es ermöglicht Ihnen, das Erscheinungsbild von Bildern und anderen grafischen Elementen mithilfe verschiedener Filterfunktionen anzupassen.

Das Attribut

filter kann eine oder mehrere Filterfunktionen annehmen, die nacheinander angewendet werden. Es stehen viele verschiedene Filterfunktionen zur Verfügung, die jeweils einen anderen visuellen Effekt anwenden.

• clip-path-Eigenschaft − Die Clip-path-CSS-Eigenschaft wird verwendet, um einen Beschneidungspfad zu erstellen, einen nicht rechteckigen Bereich, der den sichtbaren Bereich eines Elements definiert. Diese Eigenschaft wird verwendet, um Teile eines Elements auszublenden, die außerhalb des Beschneidungspfads liegen, und ermöglicht so komplexe Formen und Effekte, die bisher nur mit Bildmasken oder SVG möglich waren.

• ::before Pseudo-Element − Das ::before Pseudo-Element in CSS erstellt ein Pseudo-Element, das vor dem Inhalt des Elements eingefügt wird. Es wird verwendet, um Inhalte vor einem Element einzufügen, ohne zusätzliche HTML-Tags hinzuzufügen.

::before Eine häufige Verwendung von Pseudoelementen besteht darin, vor einem Element dekorative Inhalte wie Symbole oder Formen hinzuzufügen. Das Pseudoelement ::before kann auch zum Hinzufügen von Text, Hintergrundbildern und anderen Inhalten verwendet werden.

Schritte, die Sie befolgen müssen

Hier sind die Schritte, die in diesem Beispiel durchgeführt wurden -

• Schritt 1 – Verwenden Sie .icon-container div, um einen Symbol-/Bildcontainer zu erstellen. Wenden Sie box-sizing: border-box auf alle Elemente auf der Seite an und setzen Sie Ränder und Abstand für alle Elemente auf 0.

• Schritt 2 – Dann setzen Sie das body-Element auf display: flex sowie justify-content: center und align-items: center, um das Containerelement vertikal und horizontal auf der Seite zu zentrieren. Die Hintergrundfarbe des body-Elements ist auf Dunkelgrau (#333) eingestellt.

• Schritt 3 − Als nächstes müssen wir dem Containerelement Stile mit einem Farbtropfeneffekt hinzufügen. Es erhält eine relative Positionierung, eine Breite und Höhe von 200 Pixeln sowie ein Hintergrundbild, das zentriert ist und das gesamte Containerelement abdeckt.

Das Attribut

Filter wird verwendet, um das Hintergrundbild auf Graustufen (d. h. Schwarzweiß) festzulegen, und das Attribut Cursor wird auf Zeiger b> gesetzt, um dem Benutzer anzuzeigen, dass das Element anklickbar ist.

• Schritt 4 – Dann erstellen wir den Farbtropfeneffekt beim Schweben. Verwenden Sie das Pseudoelement ::before, um einen weißen Kreis zu erstellen, der beim Schweben abgeschnitten wird, um das darunter liegende Hintergrundbild anzuzeigen.

Die Eigenschaft

clip-path ist auf circle(0 % bei 50 % 0 %) eingestellt, beginnend mit einem Beschneidungskreis mit einem Radius von 0 % (d. h. kein sichtbarer Bereich) in der Mitte oben am Containerelement .

Wenn sich die Maus über dem Element befindet, wechselt die Eigenschaft clip-path zu circle(100 % bei 50 % 0 %), wodurch ein Kreis erstellt wird, der das gesamte Containerelement abdeckt. Die Dauer dieser Übergangsanimation beträgt 0,4 Sekunden, wobei die Ease-Out-Time-Funktion verwendet wird.

Beispiel

Sehen wir uns ein Beispiel an -

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8" />
   <title> Color Drop Effect </title>
   <style>
      /* Resetting default styles */
      * {
         margin: 0;
         padding: 0;
         box-sizing: border-box;
      }
      /* Centering the container */
      body {
         display: flex;
         justify-content: center;
         align-items: center;
         height: 100vh;
         background-color: #333;
      }
      /* Creating the color drop effect */
      .icon-container {
         position: relative;
         width: 200px;
         height: 200px;
         background-image: url('https://via.placeholder.com/200');
         background-size: cover;
         background-position: center;
         background-repeat: no-repeat;
         filter: grayscale(100%);
         cursor: pointer;
      }

      .icon-container::before {
         content: '';
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         background-color: rgba(255, 255, 255, 0.7);
         clip-path: circle(0% at 50% 0%);
         transition: clip-path 0.4s ease-out;
      }

      .icon-container:hover::before {
         clip-path: circle(100% at 50% 0%);
      }
   </style>
</head>
<body>
   <div class="icon-container"></div>
</body>
</html>

Fazit

Zusammenfassend lässt sich sagen, dass die Verwendung des Farbtropfeneffekts in HTML und CSS eine unterhaltsame und kreative Möglichkeit sein kann, die visuelle Attraktivität einer Website oder Webanwendung zu verbessern. Mit der Möglichkeit, die Bildfarbe beim Bewegen des Mauszeigers zu ändern, können Sie dynamische Elemente hinzufügen, um die Aufmerksamkeit der Benutzer zu erregen und Ihre Inhalte hervorzuheben.

In diesem Artikel erläutern wir die Grundlagen der Verwendung des Farbtropfeneffekts zum Ändern der Farbe Ihres Bildes. Wir haben die Verwendung des Filterattributs zum Bearbeiten der Graustufen eines Bildes, die Verwendung des :before-Pseudoelements zum Erstellen eines Überlagerungseffekts und die Verwendung des Clip-Path-Attributs zum Erstellen einer kreisförmigen Maske behandelt, die beim Schweben Farbe anzeigt.

Durch die Implementierung dieses Effekts können Sie ein ansprechenderes Benutzererlebnis schaffen und Ihrer Website etwas Personalisierung hinzufügen. Mit etwas Experimentierfreudigkeit und Kreativität können Sie diese Technik sogar auf die nächste Stufe bringen und komplexere Farbtropfeneffekte erzeugen, die wirklich hervorstechen.

Das obige ist der detaillierte Inhalt vonWie entferne ich Füllfarben, um die Bildfarbe mithilfe von HTML und CSS zu ändern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!