In HTML/CSS kann der Benutzer unterschiedliche Elemente hinzufügen, und das Einbetten von Bildern ist eines davon. Sie können auch verschiedene Eigenschaften von CSS anwenden, um Webseiten attraktiver zu machen, z. CSS liefert auch eine “verwandelnEigenschaft, die zur Anwendung der mehrdimensionalen Transformation auf ein Element verwendet wird.

Dieses Tutorial wird veranschaulichen:

• So fügen Sie Bild in einen Behälter hinzu?
• So drehen Sie das Hintergrundbild im Behälter?

So fügen Sie Bild in einen Behälter hinzu?

Um einem Container ein Bild hinzuzufügen, gehen Sie die aufgeführten Schritte durch.

Schritt 1: Überschrift einfügen

Fügen Sie zunächst eine Überschrift mit der "hinzu"

”Tag auf der HTML -Seite. Dann fügen Sie die “ein“ausrichten”Attributwert für die Festlegung der Ausrichtung der Überschrift in der Mitte.

Schritt 2: Erstellen Sie einen DIV -Behälter

Als nächstes erstellen Sie eine “Container und Zuordner der Klasse "Image-Container" und "Ausrichtung".

Schritt 3: Bild in einem DIV -Behälter hinzufügen

Dann einfügen eine “Tag zusammen mit den folgenden Attributen:

• Der "srcDas Attribut gibt die URL der Mediendatei an.
• “Alt”Wird verwendet, um den Text für einen bestimmten Bereich zu definieren, wenn das Bild nicht angezeigt wird.
• “Breite”Zuweist die Breite des Bildes.
• “HöheDas Attribut definiert die Höhe des Bildes.
• “Stil”Wird verwendet, um das CSS -Styling anzugeben, einschließlich Rand und Farbe für Elemente:

HTML -Bild

Ausgang

So drehen Sie das Hintergrundbild im Behälter?

Probieren Sie die unten angegebenen Anweisungen zum Drehen des Bildes im Container aus.

Schritt 1: Behälter zugreifen

In CSS zuerst zugreifenImage-ContainerKlasse mit Hilfe eines Punktauswahl.

Schritt 2: Drehen Sie das Bild „30“ Grad

Nach dem Zugriff auf die “Container, wenden Sie die folgenden CSS -Eigenschaften an:

.Image-Container
Transformation: Drehen (30 °);
Breite: 30%;
Höhe: 30%;
Hintergrundgröße: Cover;
Rand: 30px;

Hier:

• Der "verwandelnDie Eigenschaft wird zum Drehen des Behälters verwendet. Zum Beispiel die CSS -Funktion “drehen (30 °)”Gibt eine Transformation an, die das Element in Richtung eines Fixpunkts in der 2D -Ebene dreht.
• “HöheEigenschaft verteilt die Höhe einem Element.
• “Hintergrundgröße”Zuweist die Größe des Elementhintergrunds.
• “RandDie Eigenschaft legt den leeren Platz für ein Element auf der Außenseite des definierten Elements fest.

Es kann beobachtet werden, dass das Bild auf 30 Grad des Div -Behälters gedreht wird:

Schritt 4: Bild "60" Grad drehen

Um das Bild auf 60 Grad zu drehen, setzen Sie den Wert der “drehen()" funktionieren als "60 Grad”:

Transformation: Drehung (60 Grad);

Ausgang

In diesem Beitrag wurde das Verfahren zum Drehen des Hintergrundbildes im Container angegeben.

Abschluss

Um das Bild im Behälter zu drehen, erstellen Sie zunächst eine “”Und fügen Sie das Bild hinzu, indem Sie die" verwenden "" Schild. Greifen Sie dann auf die Klasse zu, um die “anzuwenden“verwandelnEigenschaft zum Drehen des Bildes mit dem angegebenen Wert. Benutzer können andere CSS -Eigenschaften anwenden, um das Element zu stylen, wie zHöhe","Hintergrundgröße", Und "Rand”. Dieser Beitrag hat die Methode zum Drehen des Bildes in einem Behälter gezeigt.