So steuern Sie die Hintergrundfarbe einer Webseite mit CSS

Wenn es um den Hintergrund geht, gibt es meiner Meinung nach nur Hintergrundfarben und Farbbilder, um zu diesen beiden bgcolor="#808080" und background="URL" hinzuzufügen. richtig? Aber was ich hier vorstellen werde, ist nicht, dies zu tun, sondern CSS-Stile zu verwenden. Obwohl es etwas mühsam ist, ist die Gesamtkoordination immer noch sehr gut.

Hintergrundfarbe Hintergrundfarbe

Ich glaube nicht, dass ich das mehr vorstellen muss. Ich denke, jeder kennt stattdessen den Farbcode durch den angegebenen Code. Der Standardwert hierfür ist transparent. Beispiel:

body{background-color:yellow} 
H1{background-color:#000000}

(Empfohlenes Tutorial: CSS Getting Started Tutorial)

Hintergrundbild Hintergrundbild

Hintergrundbild und Hintergrund Die Farbeinstellungen in HTML sind grundsätzlich gleich und können durch Hinzufügen relevanter Anweisungen ergänzt werden. Aber hier beziehe ich mich nicht auf diese Methode, die Methode, die ich verwende, ist immer noch CSS. Die Hauptfunktion von Hintergrundbild besteht darin, Bilder anzuzeigen. Fügen Sie einfach die URL (die Adresse des Bildes) am Ende hinzu Das ist nicht der Fall, da der Standardwert „none“ ist. Wenn Sie ihn hinzufügen möchten, fügen Sie am Ende einfach „none“ hinzu. Beispiel:

body
{
background-image:url('file&:///C:/WINDOWS/BACKGRND.GIF')
} 
h1
{
background-image:url('none')
}

Wenn Sie die Hintergrundbilder auf der Seite verwenden, müssen Sie oft auf einige Bilder stoßen, die zu klein sind, was zu verschiedenen wiederkehrenden Bildern führt, die die Schönheit der gesamten Seite zerstören, die Sie ändern möchten Bilder, aber es kann eine problematische Situation wie Unangemessenheit sein. Solange Sie jedoch die folgenden Methoden zur Steuerung von Bildern in CSS verwenden, werden Sie in Zukunft keine derartigen Probleme mehr haben.

Ob das Bild wiederholt im Hintergrund angezeigt wird

Manchmal ist eine wiederholte Anzeige notwendig, aber manchmal bereitet eine wiederholte Anzeige Kopfschmerzen. Das kann Ihnen sehr gut helfen , und es kann Ihnen auch helfen, die Art und Weise zu steuern, wie Bilder wiederholt werden (horizontal wiederholen, vertikal wiederholen und in beide Richtungen wiederholen). Um eine Wiederholung in diese drei Richtungen zu erreichen, folgen Sie einfach „bcackground-repeat“ (in der Horizontalen verteilen). Richtung), Wiederholung-y (Ausbreitung in vertikaler Richtung), Wiederholung (Ausbreitung in beide Richtungen).

Natürlich kann die Vervielfältigung oder Nichtvervielfältigung von Bildern gesteuert werden. no-repeat gibt an, dass nur ein Hintergrundbild statt wiederholt angezeigt wird. Dies ist nicht die Standardeinstellung. Standardmäßig wird das Hintergrundbild wiederholt angezeigt. Beispiel:

body
{
background-image:url('file&:///C:/WINDOWS/BACKGRND.GIF');
background-repeat:no-repeat
}

Positionierung der Bildanzeigeposition Hintergrundposition

Ein Hintergrundbild reicht nach den oben genannten Einstellungen oft nicht aus, denn wenn Sie die oben genannten Einstellungen verwenden, ist es das nicht wiederholt Nachdem die Anzeige eingestellt ist, wird das Bild nur in der oberen linken Ecke der Seite und nicht an anderer Stelle angezeigt. Wenn Sie jedoch möchten, dass dieses Hintergrundbild in der Mitte oder an einer anderen Stelle erscheint, kann Ihnen die Hintergrundposition helfen. Da es verwendet wird, um eine Position relativ zur oberen linken Ecke des Bildes anzuzeigen (der Standardwert ist 0 % 0 %), wird es durch zwei Werte festgelegt, die durch ein Leerzeichen getrennt sind.

Seine Hauptwerte sind left　centerright und topcenterbottom. Sie können auch einen Prozentwert verwenden, um eine relative Position anzugeben, oder einen Wert, um eine absolute Position anzugeben Mitte und Ein horizontaler Wert von 50 Pixel bedeutet, dass das Bild horizontal um 50 Pixel vom oberen linken Eckbereich verschoben wird. Hier wird besonders darauf hingewiesen, dass 1. Wenn Sie den Wert festlegen, geben Sie nur einen Wert an, der äquivalent ist um nur die horizontale Position anzugeben, und die vertikale Position wird automatisch auf 50 % eingestellt. 2Wenn der von Ihnen festgelegte Wert eine negative Zahl ist, bedeutet dies, dass das Hintergrundbild die Grenze überschreitet. Beispiel:

body
{
background-image:url('file&:///C:/WINDOWS/BACKGRND.GIF');
background-repeat:no-repeat;
background-position:100px 10px
}

Kontrollieren Sie, ob das Bild im Hintergrund-Anhang scrollt

Die beiden oben genannten Schritte können Ihnen dabei helfen, die Positionierung des Bildes abzuschließen, aber danach ist es nicht perfekt Wenn Ihre Seite über eine Bildlaufleiste verfügt, wird Ihr Hintergrundbild nicht für immer an dieser Position positioniert. Wenn Sie möchten, dass das Bild dauerhaft an dieser Position positioniert wird, können Sie das Bild nur mit dem Inhalt der Seite scrollen lassen Was das Scrollen angeht, kann Ihnen der Hintergrundanhang zu diesem Zeitpunkt helfen. Sie müssen nur einen Bildlauf (statisch) und einen festen (Bildlauf) hinzufügen.

Natürlich lasse ich es nicht zu, dass Sie es zufällig hinzufügen. Scrollen ist schließlich die Standardeinstellung, was bedeutet, dass das Bild nicht mit dem Inhalt der Seite scrollen darf. Beispiel:

body
{
background-image:url('file&:///C:/WINDOWS/BACKGRND.GIF');
background-repeat:no-repeat;
background-attachment:fixed
}

Okay, nach den oben genannten Einstellungen glaube ich, dass Ihr Hintergrund schöner wird, aber zu viel Code hat oft eine schlechte Lesbarkeit und ist anfällig für Fehler, also hier Was ich Ihnen sagen möchte, ist, dass Sie Sie können alle oben genannten Codes zusammen verwenden, dh die oben genannten verwandten Codes in den Hintergrund einfügen.

Wenn Sie den Code zum Hintergrund hinzufügen, fügen Sie zwischen jedem Wert ein Leerzeichen ein, um ihn zu trennen, und fügen Sie den Hintergrundfarbcode nicht hinter der URL des Hintergrundbilds ein, um zu vermeiden, dass das Bild nicht angezeigt wird. Beispiel:

body
{
background:green url('file&:///C:/WINDOWS/BACKGRND.GIF') 
fixed 100px 50px no-repeat
}

Hinweis: Wenn Sie Code zum direkten Einfügen verwenden, müssen Sie den folgenden Code hinein und dann dazwischen einfügen, damit er normal angezeigt wird!

Empfohlene verwandte Video-Tutorials: CSS-Video-Tutorial

Das obige ist der detaillierte Inhalt vonSo steuern Sie die Hintergrundfarbe einer Webseite mit CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!