Verwenden Sie CSS, um den Hintergrund einer Webseite zu steuern

Ich denke, jeder macht sich oft Sorgen darüber, ob einige Bilder besser für den Hintergrund seiner Webseite geeignet sind, denn diese Bilder sind entweder zu groß, zu klein oder zu unordentlich Passen die Bilder besser zu Ihrer eigenen Homepage? Die Antwort ist ja. Wenn Sie wissen möchten, wie man es umsetzt, dann folgen Sie mir jetzt und ich garantiere Ihnen, dass Sie es in kürzester Zeit lernen werden. Meine Freunde, die online „eine Familie gründen“ möchten, sind jedoch im Allgemeinen in „Eröffnung“ in einem Internetcafé unterteilt (genau wie ich habe ich einfach den entsprechenden Code von den Homepages anderer Leute abgerufen, um ihn zu ändern), und andere verwenden DW oder DW Zu Hause kann professionelle Software wie FP verwendet werden, um sie zu erstellen und hochzuladen. Daher möchte ich sie zunächst in zwei Schritten vorstellen, um Freunden zu helfen, die in Internetcafés „eröffnen“, und schließlich werde ich einige kurz vorstellen Hintergrundstile, die mit DW4 erstellt wurden. Tatsächlich muss man sagen, dass alles gleich ist, nur auf unterschiedliche Weise. Okay, genug geredet, kommen wir jetzt zum Punkt.

Apropos Hintergrund: Ich denke, jeder muss wissen, wie man diesen beiden Farben bgcolor="#808080" und "background="URL" hinzufügt, aber ich werde sie hier vorstellen Dies geschieht nicht auf diese Weise, sondern mithilfe von CSS-Stilen. Obwohl dies etwas mühsam ist, ist die Gesamtkoordination immer noch sehr gut.

·Hintergrundfarbe

Ich denke, dass jeder den Farbcode kennt, um ihn darzustellen . Der Standardwert hierfür ist transparent.
Beispiel: body{background-color:gelb}
H1{background-color:#000000}

·Hintergrundbild background-image

Hintergrundbild und Hintergrundfarbe in HTML Die darin enthaltenen Einstellungen 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 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 Hintergrundbilder auf der Website verwenden, müssen Sie häufig auf problematische Situationen stoßen, z. B. darauf, dass einige Bilder zu klein sind, z. B. wiederholte Bilder, die die Schönheit der gesamten Seite zerstören, und andere Bilder, die Sie ersetzen möchten, ungeeignet sind sie. 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 erforderlich, aber manchmal kann Ihnen dies sehr gut helfen Steuern Sie die Art und Weise, wie Bilder wiederholt werden (horizontal wiederholen, vertikal wiederholen und in beide Richtungen wiederholen), indem Sie einfach „repeat-x“ nach „bcackground-repeat“ (Spreizung in horizontaler Richtung) hinzufügen. In vertikaler Richtung verteilen), wiederholen (in beide Richtungen verteilen). Natürlich kann die Vervielfältigung von Bildern gesteuert werden, aber auch die Nichtvervielfältigung von Bildern kann 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🎜>

·Suchen Sie die Bildanzeigeposition Hintergrund -Position

Ein Hintergrundbild reicht nach den oben genannten Einstellungen oft nicht aus, denn wenn Sie die obige Einstellung der nicht wiederholten Anzeige verwenden, wird das Bild nur in der oberen linken Ecke der Seite angezeigt und nicht an anderer Stelle Wenn Sie jedoch möchten, dass dieses Hintergrundbild in der Mitte oder an einer anderen Stelle erscheint, 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 %). ), festgelegt durch zwei durch Leerzeichen getrennte Werte. 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 gibt 50 % an, dass die Position in ist die Mitte und 50px Der horizontale Wert bedeutet, dass sich das Bild horizontal um 50px-Einheiten vom oberen linken Eckbereich aus bewegt. Hier ist darauf hinzuweisen, dass 1. Wenn Sie den Wert festlegen, geben Sie nur einen Wert an, was der Angabe entspricht nur die horizontale Position und die vertikale Position werden automatisch auf 50 % eingestellt. Wenn 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}

·Steuern Sie, ob das Bild im Hintergrund-Anhang scrollt

Die beiden oben genannten Schritte können Ihnen bei der Vervollständigung der Positionierung des Bildes helfen, aber danach ist es nicht perfekt, denn 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 für immer an dieser Position positioniert wird, können Sie das Bild nur scrollen lassen, während der Inhalt der Seite scrollt. Zu diesem Zeitpunkt kann Ihnen der Hintergrundanhang nur helfen ). Nur einer von ihnen reicht aus. Natürlich ist es nicht erlaubt, sie zufällig hinzuzufü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. Ich möchte Ihnen hier also sagen, dass Sie die oben genannten Einstellungen verwenden können. Alle Codes sind zusammen verwendet, das heißt, die oben genannten verwandten Codes werden dem Hintergrund hinzugefügt. Wenn Sie den Code zum Hintergrund hinzufügen, fügen Sie zwischen den einzelnen Werten ein Leerzeichen ein, um sie zu trennen. Platzieren Sie den Hintergrundfarbcode nicht hinter der URL des Hintergrundbilds, um zu verhindern, dass das Bild nicht angezeigt wird.
Beispiel: body{background:green url('file&:///C:/WINDOWS/BACKGRND.GIF') behoben 100px 50px ohne Wiederholung🎜>

Abschließend möchte ich Sie daran erinnern Wenn Sie den Code direkt verwenden und ihn einfügen möchten, müssen Sie den folgenden Code hinein und dann dazwischen einfügen, damit er normal angezeigt wird!

Das Obige ist der Inhalt der Verwendung von CSS zur Steuerung des Hintergrunds der Webseite. Weitere verwandte Artikel finden Sie auf der chinesischen PHP-Website (www.php.cn)!