So legen Sie den Stil von Bildern mit CSS fest und ändern ihn

CSS (Cascading Style Sheets) ist eine Webdesign-Sprache, die zum Hinzufügen von Stil und Layout zu Webseiten verwendet wird. CSS bietet eine Vielzahl von Funktionen, einschließlich der Möglichkeit, Bildern Stile hinzuzufügen. In diesem Artikel erfahren Sie, wie Sie Bilder mithilfe von CSS formatieren und ändern.

Schritt eins: Wählen Sie ein Bild aus

Bevor wir einem Bild mithilfe von CSS Stile hinzufügen, müssen wir zunächst eine Auswahl für das Bild treffen, auf das wir es anwenden möchten. Wir können verschiedene HTML-Elemente verwenden, um Bilder anzuzeigen, das häufigste davon ist img. Wir können den folgenden Code in einem HTML-Dokument verwenden, um ein Bild anzuzeigen:

<img  alt="So legen Sie den Stil von Bildern mit CSS fest und ändern ihn" >

Wobei das src-Attribut die URL der Datei darstellt, die wir als Quelle des Bildes verwenden möchten. Wir können die Bildquelle mit relativen oder absoluten Pfaden angeben. Wenn wir beispielsweise die Datei „example.jpg“ im Stammverzeichnis unserer Website anzeigen möchten, könnten wir den folgenden Code verwenden:

<img  alt="So legen Sie den Stil von Bildern mit CSS fest und ändern ihn" >

Nachdem wir nun das Bild ausgewählt haben, das wir formatieren möchten, finden Sie hier die Schritte zum Hinzufügen Stile für das Bild.

Schritt 2: Legen Sie die Größe des Bildes fest

Um die Größe des Bildes zu ändern, können wir die Breiten- und Höheneigenschaften von CSS verwenden. Wenn wir beispielsweise die Breite eines Bildes auf 200 Pixel und die Höhe auf 150 Pixel festlegen möchten, könnten wir den folgenden Code verwenden:

img {
   width: 200px;
   height: 150px;
}

wobei img der Selektor des Elements ist, auf das wir den Stil anwenden möchten. Die Attribute width und height stellen die Breite und Höhe des Bildes dar, das wir festlegen möchten. In diesem Fall wird die Breite auf 200 Pixel und die Höhe auf 150 Pixel eingestellt.

Schritt 3: Ändern Sie die Farbe des Bildes

Wir können das Filterattribut von CSS verwenden, um die Farbe des Bildes zu ändern. Der Wert des Filterattributs ist eine geordnete Liste von CSS-Funktionen, wobei jede Funktion den Filtertyp und die anzuwendenden Parameter darstellt. Hier sind einige häufig verwendete Filtertypen:

-grayscale konvertiert ein Bild in Graustufen.
-sepia konvertiert Bilder in Sepiatöne.
-invert kehrt die Farben des Bildes um.
-saturate erhöht die Sättigung des Bildes.
-HelligkeitPassen Sie die Helligkeit des Bildes an.
-KontrastPassen Sie den Kontrast des Bildes an.

Wenn wir beispielsweise das Bild in Graustufen konvertieren möchten, können wir den folgenden Code verwenden:

img {
   filter: grayscale(100%);
}

Wobei die Graustufenfunktion (100 %) bedeutet, das Bild vollständig in Graustufen umzuwandeln. Wir können Werte zwischen 0 % und 100 % verwenden, um das Ausmaß des anzuwendenden Effekts festzulegen.

Schritt 4: Rand anwenden

Wir können die CSS-Border-Eigenschaft verwenden, um dem Bild einen Rand hinzuzufügen. Die Border-Eigenschaft umfasst drei Untereigenschaften: border-width, border-style und border-color. Die Eigenschaft „border-width“ legt die Breite des Rahmens fest, die Eigenschaft „border-style“ legt den Rahmenstil fest und die Eigenschaft „border-color“ legt die Rahmenfarbe fest.

Wenn wir beispielsweise unseren Bildrand auf eine durchgezogene rote Linie mit einer Randbreite von 2 Pixeln festlegen möchten, können wir den folgenden Code verwenden:

img {
   border-width: 2px;
   border-style: solid;
   border-color: red;
}

wobei das Attribut „border-width“ die Breite des Randes festlegt, und das Attribut „border-style“ legt den Stil des Rahmens fest, „solid“ bedeutet einen durchgezogenen Rand, das Attribut „border-color“ legt die Farbe des Rahmens fest, hier wählen wir Rot.

Schritt 5: Bild drehen

Wir können die Transformationseigenschaft von CSS verwenden, um das Bild zu drehen. Das Transformationsattribut umfasst eine Reihe von Funktionen, darunter Rotate(), Scale() und Translate(). Mit der Funktion „rotate()“ können Elemente gedreht werden.

Wenn wir beispielsweise unser Bild um 45 Grad drehen möchten, können wir den folgenden Code verwenden:

img {
   transform: rotate(45deg);
}

Wobei die Funktion „rotieren (45 Grad)“ bedeutet, das Bild um 45 Grad zu drehen. Wir können negative Werte verwenden, um das Bild gegen den Uhrzeigersinn zu drehen.

Diese Tipps sind nur ein Teil der CSS-Bildgestaltung. Je nach Bedarf können Sie mehrere CSS-Eigenschaften kombinieren, um den gewünschten Endeffekt zu erzielen. In Anbetracht des Gesamtdesigns und der Ausstrahlung Ihrer Website sollten Sie einen einheitlichen Bildstil wählen.

Das obige ist der detaillierte Inhalt vonSo legen Sie den Stil von Bildern mit CSS fest und ändern ihn. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!