Stylingbilder in CSS

Wenn es darum geht, die Schönheit des Webdesigns zu verbessern, denken wir häufig daran, unserer Website Bilder hinzuzufügen. Das Hinzufügen von Bildern reicht jedoch nicht aus. Daher müssen Sie sie auf verschiedene Weise stylen, damit sie attraktiver aussehen. CSS bietet zahlreiche Eigenschaften, mit denen Sie den Bildern ein Styling hinzufügen können.

Dieser Beitrag erleuchtet, wie Bilder in CSS stylen können. In diesem Leitfaden werden Sie Folgendes durchlaufen:

1. Wie man eingekreiste Bilder macht
2. Wie man abgerundete Eckbilder macht
3. Wie man reaktionsschnelle Bilder macht
4. Wie man Bilder zentriert
5. Wie man transparente Bilder macht
6. So platzieren Sie Text auf Bildern
7. So fügen Sie den Bildern Filter hinzu
8. Wie man Hover Overlay auf Bildern macht
9. Wie man Bilder umdrehen

Lass uns anfangen.

Wie man eingekreiste Bilder macht

Verwenden Sie zum Zweck der Erscheinen Ihrer Bilder als Kreise das CSS-Rand-Radius-Eigentum. Im Folgenden haben wir Ihnen ein Beispiel für ein eingekreistes Bild präsentiert.

Html

Hier haben wir einfach ein Bild im SRC -Attribut des Tags hinzugefügt.

CSS

img
Grenzradius: 50%;
Breite: 200px;
Höhe: 200px;

Wenn Sie den Grenzradius auf 50% setzen, machen wir das Bild zum Kreis. Sie können den Wert ändern, wenn Sie ihn zu einem Oval oder weniger gerundet machen möchten.

Ausgang

Das Bild wurde erfolgreich umkreist.

Wie man abgerundete Eckbilder macht

Das CSS-Border-Radius-Eigentum kann auch verwendet werden, um die Ecke der Bilder abgerundet zu machen. Hier ist, wie Sie es tun.

CSS

img
Border-Radius: 10px;
Breite: 200px;
Höhe: 200px;

Hier geben wir den Grenzwert in Pixeln, um die Ecken abzurunden.

Ausgang

Die Ecken des Bildes wurden abgerundet.

Wie man reaktionsschnelle Bilder macht

Bilder, die reaktionsschnell ihre Größe entsprechend dem Browserfenster anpassen. Das unten erwähnte Beispiel zeigt, wie es geht.

Html

Im obigen Code haben wir einfach ein Bild hinzugefügt.

CSS

img
Max-Breite: 100%;
Höhe: Auto;

Um das Bild reaktionsschnell zu machen, stellen Sie die maximale Breite auf 100% und die Höhe auf das Auto ein.

Ausgang

Das Bild ändert seine Breite entsprechend der Größe des Browserfensters.

Wie man Bilder zentriert

Um ein Bild in die Mitte zu platzieren, zeigen Sie es als Element auf Blockebene an und stellen Sie seine Ränder auf das Auto ein. Betrachten Sie das folgende Beispiel unten.

CSS

img
Bildschirmsperre;
Rand-Links: Auto;
Margin-Right: Auto;
Breite: 300px;

Um ein Bild zu zentrieren, zeigen wir es einfach als Element auf Blockebene und setzen die rechten und linken Ränder auf das Auto.

Ausgang

Das Bild wurde in der Mitte ausgerichtet.

Wie man transparente Bilder macht

Wenn Sie Ihre Bilder transparent machen möchten, verwenden Sie die Eigenschaft CSS Depacity. Je weniger der Wert der Opazitätseigenschaft ist, desto mehr Transparenz des Bildes.

CSS

img
Deckkraft: 0.3;
Breite: 300px;

Im obigen Code wurde die Opazität des Bildes auf 0 gesetzt.3.

Ausgang

Das Bild wurde erfolgreich transparent gemacht.

So platzieren Sie Text auf Bildern

Verwenden Sie die CSS -Positionseigenschaft, um Text auf bestimmte Positionen auf den Bildern zu platzieren. Die verschiedenen Positionen, die Sie den Text auf dem Bild platzieren können, sind wie folgt.

1. Oben links
2. Unten links
3. Center
4. Oben rechts
5. Unten rechts

Hier haben wir mit Hilfe eines Beispiels demonstriert.

Html

Dies ist Eiffelturm

Im obigen Code haben wir einen Div -Container erstellt und das Bild und einen anderen Div -Container darin platziert.

CSS

.div
Position: Relativ;

.oben links
Position: absolut;
Top: 5px;
links: 5px;
Schriftgröße: 20px;
Schriftstil: kursiv;

img
Breite: 400px;
Deckkraft: 0.5;

Die erste DIV wurde eine relative Position erhalten, damit das zweite Div, der den Text hält, darin platziert werden kann. Mit der Topleft -Klasse zuweisen wir dem zweiten Div eine absolute Position und geben ihm einige Länge von oben und links, um dem Text eine bestimmte Schriftgröße und -stil zu verleihen.

Ausgang

Der Text wurde auf dem Bild oben links hinzugefügt.

So fügen Sie Bildern Filter hinzu

Verwenden Sie die Filtereigenschaft zum Zwecke des Hinzufügens von Filter zu Bildern wie Unschärfe oder Sättigung. Wenden Sie sich an das folgende Beispiel:

CSS

img
Breite: 300px;

.invertieren
Filter: Invert (100%);

Hier verwenden wir die Invert () -Methode auf der Filtereigenschaft, um dem Bild visuelle Effekte hinzuzufügen.

Ausgang

Visuelle Effekte wurden erfolgreich zum Bild hinzugefügt.

Einige andere Methoden, die Sie auf der Filtereigenschaft verwenden können, um verschiedene visuelle Effekte hinzuzufügen, sind:

• verwischen(),
• Kontrast(),
• Helligkeit(),
• Graustufen (),
• sättigen(),
• Opazität () usw.

Wie man Bilder umdrehen

Ein Bild drehen, wenn der Benutzer die Maus darüber bringt, kann eine interessante Sache sein. Verwenden Sie dazu die CSS -Transformationseigenschaft.

CSS

IMG: Hover
Transformation: scaley (-1);
Breite: 300px;

Hier drehen wir das Bild entlang der y-Achse unter Verwendung der maley () -Methode der Transformationseigenschaft um.

Ausgang

Das Bild wurde über die Y-Achse gedreht.

Abschluss

Das Styling von Bildern, die auf Ihrer Website erscheinen, ist sehr wichtig. Dies kann mit verschiedenen CSS -Eigenschaften erfolgen. Mehrere Dinge, die Sie tun können, um Ihre Bilder zu style. Darüber hinaus können Sie Ihre Bilder ansprechen oder Text oder bestimmte visuelle Effekte hinzufügen. In diesem Beitrag haben wir viele Möglichkeiten gezeigt, wie Sie Ihre Bilder mit CSS zusammen mit relevanten Beispielen stylen können.