Wie man mit CSS dafür sorgt, dass sich Hintergrundbilder nicht wiederholen

So stellen Sie sicher, dass sich Hintergrundbilder mit CSS nicht wiederholen: Erstellen Sie zunächst eine neue HTML-Datei und fügen Sie dann eine Klasse zu diesem Tag hinzu sich nicht wiederholende Hintergrundbilder Das war's.

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

Empfohlen: „CSS-Video-Tutorial“

Öffnen Sie das HTML-Softwareentwicklungstool, um eine neue HTML-Datei zu erstellen, und geben Sie dann ein

-Tag ein, um diesem Tag eine Klasse hinzuzufügen und den Stil des Hintergrunds festzulegen Bild. Wie im Bild gezeigt:

css legt den Hintergrund so fest, dass er sich nicht wiederholt.

legt den Hintergrundbildstil fest. Erstellen Sie ein

1. Fügen Sie ein Hintergrundbild ein.

2. Stellen Sie die Breite und Höhe des Hintergrundbilds ein (Hinweis: Der Effekt ist nicht sichtbar, ohne die Breite und Höhe festzulegen).

Sehen Sie sich den Seiteneffekt an. Speichern Sie die HTML-Seite, öffnen Sie sie mit einem Browser und stellen Sie fest, dass das Hintergrundbild wiederholt wird. Wie im Bild gezeigt:

Stellen Sie das Hintergrundbild so ein, dass es sich nicht wiederholt. Kehren Sie zur HTML-Codeseite zurück und fügen Sie „background-repeat: no-repeat;“ zum Klassenstil hinzu:

, um den Seiteneffekt anzuzeigen. Speichern Sie die HTML-Seite und öffnen Sie sie mit einem Browser. Sie werden feststellen, dass das Hintergrundbild nicht mehr wiederholt wird. Wie im Bild gezeigt:

Alle Codes auf der Seite. Sie können den gesamten Code direkt kopieren und in die neue HTML-Seite einfügen. Nach dem Speichern können Sie den Seiteneffekt sehen. (Hinweis: Das Hintergrundbild in diesem Fall ist ein lokaler Pfad. Sie müssen den Hintergrundbildpfad nach dem Einfügen des Codes ändern.)

Alle Codes:

<style type="text/css">
.bg-repeat{
background-image: url(img/ye.png);
width: 500px;
height: 380px;
}
</style>

Das obige ist der detaillierte Inhalt vonWie man mit CSS dafür sorgt, dass sich Hintergrundbilder nicht wiederholen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!