CSS-Code zur Steuerung der Hintergrundfarbe der Webseite

Ich glaube, jeder macht sich oft Sorgen, ob er Bilder findet, die zum Hintergrund seiner Webseite passen. Ich glaube, das stimmt, denn diese Bilder sind entweder zu groß, zu klein oder zu unordentlich. Gibt es also eine Möglichkeit, die Bilder an den Geschmack Ihrer Homepage anzupassen? Die Antwort ist ja.

Möchten Sie wissen, wie Sie das erreichen? Dann folgen Sie mir einfach. Ich verspreche Ihnen, dass Sie es sofort lernen werden. Ich denke jedoch, dass sich Freunde, die im Internet „ein Geschäft eröffnen“, im Allgemeinen in solche aufteilen, die in einem Internetcafé „ein Geschäft eröffnen“ (genau wie ich begann ich damit, relevante Codes von den Homepages anderer Leute zu ziehen, um sie zu ändern), und solche, die sie zu Hause mit professioneller Software wie DW oder FP erstellen und hochladen. Ich habe also vor, dies in zwei Schritten vorzustellen. Zuerst werde ich die Freunde betrachten, die in einem Internetcafé „ein Geschäft eröffnen“, und schließlich kurz einige mit DW4 erstellte Hintergrundstile vorstellen.

Eigentlich ist alles gleich, nur anders. Okay, genug des Smalltalks, kommen wir zur Sache.

Beim Hintergrund gibt es nur Hintergrundfarbe und Farbbild. Ich denke, jeder sollte wissen, dass diese beiden dazu dienen, bgcolor="#808080" und background="URL" hinzuzufügen, richtig? Aber was ich hier vorstellen werde, ist, es nicht auf diese Weise zu tun, sondern den CSS-Stil zu verwenden. Obwohl es ein bisschen mühsam ist, ist die Gesamtkoordination immer noch sehr gut.

Hintergrundfarbe background-color

Ich glaube nicht, dass ich das im Detail erklären muss. Ich denke, jeder kennt den Farbcode. Er wird entweder durch Englisch ersetzt oder durch einen bestimmten Code ausgedrückt. Der Standardwert hierfür ist transparent. Beispiel:

body{Hintergrundfarbe:gelb} 
H1{Hintergrundfarbe:#000000}

Hintergrundbild

Die Einstellungen für Hintergrundbilder und Hintergrundfarben sind im HTML grundsätzlich gleich und können durch das Hinzufügen entsprechender 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 background-image ist die Anzeige von Bildern. Wenn Sie Bilder anzeigen müssen, fügen Sie am Ende einfach die URL (Bildadresse) hinzu. Wenn Sie sie nicht anzeigen möchten, ist das am einfachsten. Sie brauchen einfach nichts, da die Standardeinstellung „none“ ist. Wenn Sie etwas hinzufügen möchten, fügen Sie am Ende einfach „none“ hinzu. Beispiel:

Körper
{
Hintergrundbild:URL('Datei&:///C:/WINDOWS/BACKGRND.GIF')
} 
h1
{
Hintergrundbild:URL('keine')
}

Beim Verwenden von Hintergrundbildern sind Sie sicherlich schon oft auf verschiedene problematische Situationen gestoßen, bei denen einige Bilder zu klein waren, was zu verschiedenen Problemen führte, beispielsweise zum wiederholten Erscheinen von Bildern, die die Schönheit der gesamten Seite zerstören, oder zum Ersetzen anderer Bilder, die nicht geeignet sind. Aber wenn Sie jetzt die folgenden CSS-Methoden zur Steuerung von Bildern verwenden, werden Sie nie wieder solche Probleme haben.

Ob das Bild wiederholt im Hintergrund angezeigt wird

Manchmal ist eine wiederholte Anzeige notwendig, manchmal jedoch ist eine wiederholte Anzeige ein Ärgernis. Dies kann Ihnen sehr hilfreich sein und Ihnen auch dabei helfen, die Art und Weise zu steuern, wie das Bild wiederholt wird (horizontal wiederholen, vertikal wiederholen und in beide Richtungen wiederholen). Um eine Wiederholung in diese drei Richtungen zu erreichen, fügen Sie nach background-repeat einfach repeat-x (horizontal), repeat-y (vertikal) und repeat (in beide Richtungen) hinzu.

Natürlich kann es die Wiederholung von Bildern steuern, und es kann auch die Nichtwiederholung von Bildern steuern. no-repeat wird verwendet, um anzugeben, dass nur ein Hintergrundbild angezeigt wird, anstatt es zu wiederholen. Dies ist nicht die Standardeinstellung. Die Standardeinstellung ist, das Hintergrundbild wiederholt anzuzeigen (Wiederholung). Beispiel:

Körper
{
Hintergrundbild:URL('Datei&:///C:/WINDOWS/BACKGRND.GIF');
Hintergrundwiederholung: keine Wiederholung
}

Positionieren Sie die Bildanzeigeposition Hintergrundposition

Ein Hintergrundbild mit den oben genannten Einstellungen reicht oft nicht aus, da das Bild bei Verwendung der oben genannten nicht wiederholten Anzeigeeinstellungen nur in der oberen linken Ecke der Seite und nicht an anderen Stellen angezeigt wird. Wenn Sie jedoch möchten, dass dieses Hintergrundbild in der Mitte oder an anderen Stellen angezeigt wird, kann Ihnen die Hintergrundposition helfen, da sie verwendet wird, um die Position des Bildes relativ zur oberen linken Ecke anzuzeigen (der Standardwert ist 0 % 0 %) und durch zwei Werte festgelegt wird, die durch ein Leerzeichen in der Mitte getrennt sind.

Seine Hauptwerte sind links Mitte rechts und oben Mitte unten. Sie können auch einen Prozentwert verwenden, um eine relative Position anzugeben, oder einen Wert, um eine absolute Position anzugeben. Beispielsweise bedeutet 50 % die Position in der Mitte, und ein horizontaler Wert von 50 Pixel bedeutet, dass das Bild horizontal 50 Pixel von der oberen linken Ecke weg verschoben wird. Hierbei ist zu beachten: 1. Wenn Sie beim Festlegen des Werts nur einen Wert angeben, entspricht dies der Angabe nur der horizontalen Position und die vertikale Position wird automatisch auf 50 % festgelegt. 2. Wenn der von Ihnen festgelegte Wert eine negative Zahl ist, bedeutet dies, dass das Hintergrundbild die Grenze überschreitet. Beispiel:

Körper
{
Hintergrundbild:URL('Datei&:///C:/WINDOWS/BACKGRND.GIF');
Hintergrundwiederholung: keine Wiederholung;
Hintergrundposition: 100px 10px
}

Kontrollieren Sie, ob das Bild im Hintergrund scrollt

Die beiden oben genannten Schritte können Ihnen dabei helfen, die Positionierung des Bildes abzuschließen, aber danach ist es nicht perfekt, denn wenn Ihre Seite eine Bildlaufleiste hat, wird Ihr Hintergrundbild nicht immer an dieser Position positioniert. Wenn Sie möchten, dass das Bild für immer an dieser Position positioniert bleibt, können Sie das Bild nur mit dem Scrollen des Seiteninhalts scrollen lassen. In diesem Fall kann Ihnen ein Hintergrundanhang helfen. Sie müssen nur eines von „Scroll“ (statisch) und „Fixed“ (Scrollen) hinzufügen.

Natürlich dürfen Sie sie nicht willkürlich hinzufügen. Schließlich ist Scrollen die Standardeinstellung, was bedeutet, dass das Bild nicht mit dem Inhalt der Seite gescrollt wird. Beispiel:

Körper
{
Hintergrundbild:URL('Datei&:///C:/WINDOWS/BACKGRND.GIF');
Hintergrundwiederholung: keine Wiederholung;
Hintergrundanhang: behoben
}

Ich glaube, dass Ihr Hintergrund nach den obigen Einstellungen schöner aussehen wird. Zu viel Code ist jedoch oft schwer zu lesen und kann leicht zu Fehlern führen. Deshalb möchte ich Ihnen hier sagen, dass Sie alle oben genannten Codes zusammenfügen können, d. h. die oben genannten zugehörigen Codes zum Hintergrund hinzufügen können.

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

Körper
{
Hintergrund:grün url('file&:///C:/WINDOWS/BACKGRND.GIF') 
fest 100px 50px keine Wiederholung
}

Abschließend möchte ich noch alle daran erinnern, dass wenn ihr den Code direkt einfügt, ihr ihn nach dem folgenden Code und dann dazwischen setzen müsst, damit er normal angezeigt wird!

Zusammenfassen

Oben sind die Details des CSS-Codes aufgeführt, der die Hintergrundfarbe der Webseite steuert. Weitere Informationen zum CSS-Webseitenhintergrund finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!