Heim  >  Artikel  >  Web-Frontend  >  So stellen Sie sicher, dass das Bild mit CSS in der oberen linken Ecke angezeigt wird

So stellen Sie sicher, dass das Bild mit CSS in der oberen linken Ecke angezeigt wird

WBOY
WBOYOriginal
2021-11-29 17:43:2511151Durchsuche

Methode: 1. Verwenden Sie die Anweisung „element {background-image:url(picture element);}“, um das Bild als Hintergrundbild des Elements festzulegen. 2. Verwenden Sie die Anweisung „element {background-position:left top; }"-Anweisung, um das Hintergrundbild zu positionieren, zeigen Sie einfach das Hintergrundbild in der oberen rechten Ecke an.

So stellen Sie sicher, dass das Bild mit CSS in der oberen linken Ecke angezeigt wird

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

So erscheint das Bild in der oberen linken Ecke mit CSS

1. Erstellen Sie eine neue HTML-Datei mit dem Namen test.html, um zu erklären, wie CSS+Div das Hintergrundbild div in der oberen linken Ecke erscheinen lässt Ecke. Erstellen Sie zum Testen ein Modul mit div. Fügen Sie dem div-Tag ein Klassenattribut hinzu und setzen Sie es auf mybg.

So stellen Sie sicher, dass das Bild mit CSS in der oberen linken Ecke angezeigt wird

2. Legen Sie im CSS-Tag den Stil der Div-Klasse fest, definieren Sie die Breite auf 300 Pixel, die Höhe auf 300 Pixel und den Rand auf 1 Pixel. Setzen Sie dann das Hintergrundbild über das Attribut „Hintergrundbild“ auf 1.png, legen Sie über „Hintergrundwiederholung“ fest, dass das Hintergrundbild nicht gekachelt werden soll, und setzen Sie das Attribut „Hintergrundposition“ auf „links oben“, um das Hintergrundbild oben links zu steuern Ecke.

So stellen Sie sicher, dass das Bild mit CSS in der oberen linken Ecke angezeigt wird

Öffnen Sie die Datei test.html im Browser, um den Effekt zu sehen.

So stellen Sie sicher, dass das Bild mit CSS in der oberen linken Ecke angezeigt wird

Zusammenfassung:

1. Verwenden Sie div, um ein Modul zu erstellen und dem div-Tag ein Klassenattribut hinzuzufügen.

2. Legen Sie im CSS-Tag den Stil der Div-Through-Klasse fest, definieren Sie die Breite auf 300 Pixel, die Höhe auf 300 Pixel und den Rand auf 1 Pixel.

3. Stellen Sie im CSS-Tag das Hintergrundbild über das Attribut „background-image“ auf 1.png ein, legen Sie über „background-repeat“ fest, dass das Hintergrundbild nicht gekachelt werden soll, und setzen Sie das Attribut „background-position“ auf „left top“. Steuern Sie die Position des Hintergrundbilds in der oberen linken Ecke.

(Teilen von Lernvideos: CSS-Video-Tutorial)

Das obige ist der detaillierte Inhalt vonSo stellen Sie sicher, dass das Bild mit CSS in der oberen linken Ecke angezeigt wird. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn