Hintergrund in CSS (Farbe, Position, Bild, Wiederholung, Anhang) - alles zum Festlegen der Hintergrundfarbe oder des Hintergrundbilds von HTML-Elementen. CSS-Hintergrund. Die vollständige Anleitung zum Wiederholen eines CSS-Images
Vom Autor: Ich begrüße alle. Hintergrundfarben und -bilder spielen im Webdesign eine große Rolle, da jedes Element attraktiver gestaltet werden kann. Heute schauen wir uns an, wie man einen Hintergrund in HTML erstellt.
Ist es möglich, mit HTML auszukommen, wenn Sie den Hintergrund einstellen?
Ich sage dir gleich, dass nein. Im Allgemeinen ist HTML nicht für die Gestaltung von Webseiten konzipiert. Es ist einfach sehr unpraktisch. Beispielsweise gibt es ein bgcolor-Attribut, mit dem Sie die Hintergrundfarbe festlegen können. Dies ist jedoch sehr unpraktisch.
Dementsprechend werden wir Cascading Style Sheets (CSS) verwenden. Es gibt viel mehr Möglichkeiten, den Hintergrund festzulegen. Wir werden heute die grundlegendsten analysieren.
Wie stelle ich den Hintergrund über CSS ein?
Zunächst müssen Sie also entscheiden, welches Element Sie zum Festlegen des Hintergrunds benötigen. Das heißt, wir müssen den Selektor finden, in den wir die Regel schreiben werden. Wenn beispielsweise der Hintergrund für die gesamte Seite als Ganzes festgelegt werden muss, können Sie dies über den Body Selector für alle Blöcke tun - über den Div Selector. Nun, etc. Der Hintergrund kann und sollte an andere Selektoren gebunden sein: Stilklassen, Bezeichner usw.
Nachdem Sie sich für den Selektor entschieden haben, müssen Sie den Namen der Eigenschaft selbst schreiben. Verwenden Sie zum Festlegen der Hintergrundfarbe (nur eine Volltonfarbe, kein Farbverlauf oder Bild) die Eigenschaft Hintergrundfarbe. Danach müssen Sie einen Doppelpunkt setzen und die Farbe selbst schreiben. Dies kann auf verschiedene Arten erfolgen. Verwenden Sie beispielsweise die Formate Schlüsselwörter, Hex-Code, RGB, RGBA und HSL. Jede Methode reicht aus.
Die am häufigsten verwendete Methode ist der Hexadezimalcode. Für die Farbanpassung können Sie ein Programm verwenden, das den Farbcode anzeigt. Zum Beispiel Photoshop, Malen oder ein Online-Tool. Dementsprechend werde ich zum Beispiel einen allgemeinen Hintergrund für die gesamte Webseite schreiben.
körper (Hintergrundfarbe: # D4E6B3;)
Dieser Code muss in den Kopfbereich eingefügt werden. Es ist wichtig, dass sich die Dateien im selben Ordner befinden.
Bild als Hintergrund
Ich werde ein kleines HTML-Symbol als Bild verwenden:
Erstellen wir einen leeren Block mit einem Bezeichner:
< div id = "bg" > < / div > |
Geben wir ihm explizite Dimensionen und Hintergründe:
#bg (Breite: 400px; Höhe: 250px; Hintergrundbild: URL (html.png);)
#bg ( breite: 400px; höhe: 250px; hintergrundbild: URL (html. png); |
An diesem Code können Sie sehen, dass ich eine neue Eigenschaft verwendet habe - Hintergrundbild. Es dient nur zum Einfügen eines Bildes als Hintergrund für ein HTML-Element. Lass uns nachsehen, was passiert ist:
Um ein Bild festzulegen, müssen Sie das URL-Schlüsselwort nach dem Doppelpunkt schreiben und dann den Dateipfad in Klammern angeben. In diesem Fall wird der Pfad basierend auf der Tatsache angegeben, dass sich das Bild im selben Ordner wie das HTML-Dokument befindet. Sie müssen auch das Seitenverhältnis angeben.
Wenn Sie dies getan haben und der Hintergrund immer noch nicht im Block angezeigt wird, überprüfen Sie erneut, ob Sie den Namen des Bildes richtig geschrieben haben und ob der Pfad und die Erweiterung korrekt angegeben wurden. Dies sind die häufigsten Gründe, warum der Hintergrund einfach nicht angezeigt wird, weil der Browser das Bild nicht finden kann.
Aber haben Sie eine Besonderheit bemerkt? Der Browser hat das Bild im gesamten Block aufgenommen und reproduziert. Damit Sie wissen, ist dies das Standardverhalten von Hintergrundbildern - sie werden vertikal und horizontal wiederholt, bis sie in den Block passen. Sie können dieses Verhalten leicht steuern. Verwenden Sie dazu die Eigenschaft background-repeat mit 4 Hauptwerten:
Wiederholen - Standardwert, das Bild wird auf beiden Seiten wiederholt.
Repeat-x - Wiederholungen nur für ois x;
Repeat-y - wiederholt sich nur entlang der y-Achse;
Keine Wiederholung - wiederholt sich überhaupt nicht;
Sie können jeden Wert schreiben und sehen, was passiert. Ich werde es so schreiben:
hintergrundwiederholung: Wiederholung-x;
hintergrund - Wiederholung: Wiederholung - x; |
Jetzt nur noch horizontal wiederholen. Ohne Wiederholung würde es nur ein Bild geben.
Großartig, Sie können dies bereits beenden, da dies grundlegende Möglichkeiten für die Arbeit mit dem Hintergrund sind, aber ich werde Ihnen zwei weitere Eigenschaften zeigen, mit denen Sie mehr Kontrolle darüber erlangen können.
Bei Wiederholungen erzielten Layoutdesigner Hintergrundtexturen und Farbverläufe mit einem winzigen Bild. Es können 30 x 10 Pixel oder weniger sein. Vielleicht ein bisschen mehr. Das Bild war so, dass bei Wiederholung auf einer oder sogar auf beiden Seiten keine Übergänge sichtbar waren, so dass am Ende ein einziger fester Hintergrund erhalten wurde. Übrigens lohnt sich dieser Ansatz jetzt, wenn Sie eine nahtlose Textur auf Ihrer Website als Hintergrund verwenden möchten. Der Gradient kann bereits heute mit css3-Methoden implementiert werden, darüber werden wir auf jeden Fall sprechen.
Hintergrundposition
Standardmäßig befindet sich ein Hintergrundbild in der oberen linken Ecke des Blocks, wenn es nicht auf Wiederholung eingestellt ist. Die Position kann jedoch einfach mithilfe der Eigenschaft "Hintergrundposition" geändert werden.
Sie können es auf verschiedene Arten fragen. Eine der Optionen besteht einfach darin, die Seiten anzugeben, auf denen sich das Bild befinden soll:
hintergrundposition: rechts oben;
hintergrund - Position: rechts oben; |
Das heißt, vertikal blieb alles beim Alten: Das Hintergrundbild befindet sich oben, aber horizontal haben wir die Seite nach rechts geändert, dh nach rechts. Eine andere Möglichkeit, die Position festzulegen, ist der Prozentsatz. In diesem Fall beginnt der Countdown in jedem Fall in der oberen linken Ecke. 100% - der ganze Block. Um das Bild genau in der Mitte zu platzieren, schreiben wir wie folgt:
hintergrundposition: 50% 50%;
hintergrund - Position: 50% 50%; |
Denken Sie an eine wichtige Sache im Zusammenhang mit der Positionierung: Der erste Parameter ist immer die horizontale Position und der zweite die vertikale Position. Wenn Sie also einen Wert von 80% bis 20% sehen, können Sie sofort schließen, dass das Hintergrundbild stark nach rechts verschoben wird, aber nicht stark abnimmt.
Schließlich können Sie die Position in Pixel schreiben. Alles ist gleich, aber anstelle von% wird es px geben. In einigen Fällen kann diese Positionierung auch erforderlich sein.
Kurznotation
Stimmen Sie zu, dass sich der Code als ziemlich umständlich herausstellt, wenn alles so eingestellt ist, wie wir es getan haben. Es stellt sich heraus, dass der Pfad zum Bild festgelegt werden muss, sowie die Wiederholung und die Position. Natürlich sind Wiederholung und Position nicht immer notwendig, aber in jedem Fall ist es korrekter, die Shorthand-Eigenschaft zu verwenden. Es sieht aus wie das:
hintergrund: # 333 URL (bg.jpg) No-Repeat 50% 50%;
hintergrund: # 333 url (bg.jpg) no-repeat 50% 50%; |
Das heißt, der erste Schritt besteht darin, bei Bedarf die gesamte feste Hintergrundfarbe aufzuzeichnen. Dann der Weg zum Bild, Wiederholung und Position. Wenn ein Parameter nicht benötigt wird, lassen wir ihn einfach weg. Stimmen Sie zu, dies ist viel schneller und bequemer, und wir reduzieren auch unseren Code erheblich. Im Allgemeinen rate ich Ihnen, immer in Abkürzungen zu schreiben, auch wenn Sie nur eine Farbe oder ein Bild angeben müssen.
Steuern der Größe des Hintergrundbilds
Unser aktuelles Bild ist nicht gut für den nächsten Trick geeignet, also nehme ich einen anderen. Lassen Sie es in der Größe wie einen Block oder größer als es sein. Stellen Sie sich also vor, Sie stehen vor einer Aufgabe: ein Hintergrundbild zu erstellen, damit es seinen Block nicht vollständig ausfüllt. Und das Bild ist zum Beispiel noch größer als die Blockgröße.
Was können Sie in diesem Fall tun? Die einfachste und vernünftigste Option wäre natürlich, das Bild einfach zu verkleinern, aber dies ist nicht immer möglich. Nehmen wir an, es befindet sich auf dem Server und im Moment gibt es keine Zeit oder Gelegenheit, es zu reduzieren. Das Problem kann mithilfe der Eigenschaft "Hintergrundgröße" gelöst werden, die als relativ neu bezeichnet werden kann und mit der Sie die Größe des Hintergrundbilds oder eines beliebigen Hintergrunds ändern können.
Mein Bild nimmt jetzt den gesamten Platz im Block ein, aber ich gebe ihm eine Hintergrundgröße:
hintergrundgröße: 80% 50%;
hintergrundgröße: 80% 50%; |
Wieder ist der erste Parameter die horizontale Größe, der zweite die vertikale Größe. Wir können sehen, dass alles korrekt angewendet wurde - das Foto wurde 80% der Breite des Blocks in der Breite und der Hälfte in der Höhe. Hier müssen Sie nur eine Klarstellung vornehmen: Durch Einstellen der Größe in Prozent können Sie die Proportionen des Bildes beeinflussen. Achten Sie also darauf, nicht überproportional zu werden.
Wie Sie sich vorstellen können, kann die Hintergrundgröße auch in Pixel angegeben werden. Es gibt auch zwei Schlüsselwörter, die ebenfalls verwendet werden können:
Cover - Das Bild wird so skaliert, dass mindestens eine Seite den Block vollständig ausfüllt.
Enthält - skaliert es so, dass das Bild in seiner maximalen Größe vollständig in den Block passt.
Der Vorteil dieser Werte besteht darin, dass sie das Seitenverhältnis des Bildes nicht ändern und sie gleich lassen.
Sie sollten auch verstehen, dass das Dehnen des Bildes zu einer Verschlechterung der Qualität führen kann. Ich kann ein Beispiel aus dem Leben und der Praxis von Layoutern geben. Jeder weiß und versteht, dass Sie beim Codieren für Desktops die Site an die Hauptbreiten von Monitoren anpassen müssen: 1280, 1366, 1920. Wenn Sie ein Hintergrundbild mit einer Größe von beispielsweise 1280 x 200 aufnehmen und keine Hintergrundgröße festlegen, sind Bildschirme mit einer Breite größer Es erscheint ein leerer Raum, das Bild füllt die Breite nicht vollständig aus.
In 99% der Fälle passt dies nicht zum Webentwickler, daher legt er die Hintergrundgröße fest: Abdeckung, sodass sich das Bild immer bis zur maximalen Breite des Fensters erstreckt. Dies ist ein guter Trick, aber jetzt stoßen Sie auf das Problem, dass Benutzer mit einer Bildschirmbreite von 1920 Pixel möglicherweise ein Bild von nicht optimaler Qualität sehen.
Ich möchte Sie daran erinnern, dass es sich bis zur maximalen Breite erstreckt. Dementsprechend verschlechtert sich die Qualität automatisch. Die einzig richtige Lösung wäre, zunächst ein größeres Bild mit einer Breite von 1920 Pixel zu verwenden. Auf den breitesten Bildschirmen wird es dann in seiner natürlichen Größe angezeigt, und auf anderen wird es einfach langsam zugeschnitten. Bei korrekter Auswahl des Hintergrundbilds wirkt sich dies jedoch nicht auf das Erscheinungsbild der Site aus.
Im Allgemeinen ist dies nur ein Beispiel dafür, wie Sie das in diesem Artikel erworbene Wissen beim Erstellen realer Layouts verwenden können.
Halbtransparenter Hintergrund mit CSS
Ein weiterer Trick, der mit CSS implementiert werden kann, ist ein halbtransparenter Hintergrund. Das heißt, vor diesem Hintergrund wird es möglich sein zu sehen, was dahinter steckt.
Als Beispiel werde ich die gesamte Seite als Hintergrundbild festlegen, das wir zuvor in den Beispielen verwendet haben. Für den Block mit der BG-Kennung, an dem wir alle unsere Experimente durchführen, legen wir den Hintergrund im RGBA-Farbformat fest.
Wie ich bereits sagte, gibt es in CSS viele Formate zum Festlegen von Farben. Eines davon ist rgb, ein ziemlich bekanntes Format für diejenigen, die in Grafikeditoren arbeiten. Es ist so geschrieben: rgb (17, 255, 34);
Der erste Wert in Klammern ist die Sättigung von Rot, dann Grün und dann Blau. Der Wert kann numerisch von 0 bis 255 sein. Dementsprechend unterscheidet sich das rgba-Format nicht, es wird nur ein weiterer Parameter hinzugefügt - der Alphakanal. Der Wert kann zwischen 0 und 1 liegen, wobei 0 für vollständige Transparenz steht.
Brief Information
CSS-Versionen
Die Werte
url Der Wert zur Grafikdatei, der in der url () -Konstruktion angegeben ist, wird als Wert verwendet. In diesem Fall kann der Pfad zur Datei entweder in Anführungszeichen (doppelt oder einfach) oder ohne Anführungszeichen geschrieben werden. none Bricht das Hintergrundbild für das Element ab. erben Erbt den Wert des Elternteils.HTML5 CSS2.1 IE Cr Op Sa Fx
Objektmodell
document.getElementById ("elementID") .style.backgroundImage
Browser
Internet Explorer 7.0 oder höher wendet einen Hintergrund auf die Innenseite des Rahmens eines Elements an, für das die Eigenschaft hasLayout festgelegt ist. Wenn ein Element kein hasLayout hat, berücksichtigt die Eigenschaft "Hintergrundbild" die in der Spezifikation angegebenen Rahmen des Elements. Der Unterschied in der Anzeige macht sich bemerkbar, wenn die Ränder gestrichelt oder gepunktet und nicht durchgehend sind.
Wenn das Element auf Scrollen oder Auto eingestellt ist, hat Internet Explorer 8 eine vertikale Verzögerung von einem Pixel, wenn der Hintergrund gescrollt wird.
Internet Explorer 7.0 oder höher unterstützt den geerbten Wert nicht.
Wenn der Hintergrund für eine Tabellenzeile (Tag) festgelegt ist
HTML5 CSS2.1 IE Cr Op Sa Fx
| 1 | 2 | 3 |
Das Ergebnis dieses Beispiels im Chrome-Browser ist in Abb. 2 dargestellt. 1. Browser Internet Explorer, Opera und Firefox zeigen den Hintergrund für die Zeile korrekt an (Abb. 2).
Zahl: 1. Wiederholen Sie den Hintergrund für jede Zelle
Zahl: 2. Hintergrund für die gesamte Linie
Ich denke, es gibt keinen einzigen Ort, an dem die Immobilie nicht genutzt wird CSS-Hintergrund... Es scheint, dass was einfacher sein könnte als diese Eigenschaft? Aber nein, seine Fähigkeiten sind viel breiter als der übliche Zweck eines Bildes oder einer Farbe als Hintergrund einer Seite. Etwas wird bekannt sein, aber etwas wird sicherlich für viele zu einer Neuheit werden. In jedem Fall ist es hilfreich, genau zu wissen, wie der Hintergrund funktioniert.
CSS3 brachte viele neue Dinge in die Eigenschaft, einschließlich Transparenz und Zuweisung mehrerer Bilder als Hintergrund. Wir werden jedoch weiter unten darauf eingehen und zunächst die Grundlagen der Eigenschaft betrachten. hintergrund.
hintergrundfarbe
Ich bin mir ziemlich sicher, dass Sie schon oft Hintergrundfarben zugewiesen haben. Dies kann mit verschiedenen Notationstypen erfolgen: regulär (Farbname wird verwendet), hexadezimal oder RGB-Notation. Jeder Typ ist gleich, verwenden Sie, was Ihnen am besten gefällt. Ich versuche, die kürzeste Version zu verwenden, und für die Wahrnehmung ist es einfacher und die Stildatei ist etwas kleiner.
P (Hintergrundfarbe: rot;) p (Hintergrundfarbe: # f00;) p (Hintergrundfarbe: # ff0000;) p (Hintergrundfarbe: rgb (255, 0, 0;))
CSS3 unterstützt Transparenz, sodass Sie es wie folgt zu unserer Farbe hinzufügen können:
P (Hintergrundfarbe: rgba (255, 0, 0, 0,5);)
Die letzte Ziffer wurde auf 50% Transparenz eingestellt. Sie können den Transparenzwert von 0 (vollständig transparenter Hintergrund) bis 1 (vollständig undurchsichtig) einstellen.
hintergrundbild
Diese Eigenschaft wird auch sehr oft verwendet. Sie ermöglicht es Ihnen, dem Hintergrund ein Bild zuzuweisen. CSS3 bietet die Möglichkeit, dem Hintergrund mehrere Bilder zuzuweisen, von denen jedes eine Art Ebene bildet, sodass jedes nachfolgende dem vorherigen überlagert wird. Warum könnte dies nützlich sein? Alles ist ganz einfach - nehmen wir an, Sie müssen die kleinen Dinge in jeder Ecke der Site befestigen. Die Verwendung eines mehr oder weniger flüssigen Layouts mit einem Bild ist keine Option. Deshalb machen wir 4 "Ebenen", verschieben jedes Bild in eine eigene Ecke und fertig, das Problem ist gelöst
Körper (Hintergrundbild: URL ("Bild1"), URL ("Bild2"), URL ("Bild3"))
Wenn Sie dem Hintergrund ein Bild zuweisen müssen, belassen wir nur das erste im Code. Ich denke, das ist verständlich.
Bei der Verwendung eines Bildes als Hintergrund sind zwei Regeln zu beachten:
- stellen Sie eine kontrastierende Hintergrundfarbe ein, falls der Benutzer aus irgendeinem Grund kein Bild anzeigen kann. Es kann die Anzeige von Bildern kitschig ausschalten, spart Verkehr.
- verwenden Sie kein Hintergrundbild, um wichtige Informationen zu übermitteln. Aus dem oben genannten Grund kann es sein, dass der Benutzer es nicht sieht.
Die Unterstützung für mehrere Hintergrundbilder ist breit genug. Alle Browser, auch IE8, unterstützen diese Eigenschaft.
Hallo liebe Leser der Blogseite. Heute werden wir uns fünf CSS-Regeln ansehen, mit denen Sie den Hintergrund für jedes Element in HTML festlegen können - Hintergrundposition (Bild, Wiederholung, Farbe, Anhang). Vergessen wir nicht, auch die zusammengesetzte Hintergrundregel zu erwähnen.
Das ist nicht schwierig, aber es gibt bestimmte Feinheiten und Nuancen, die Sie über eine vorgefertigte Vorlage wissen müssen (denken Sie daran, dass Sie damit alle Details eines Designs öffnen können).
Ich möchte Sie noch einmal daran erinnern, dass dieser Artikel Teil einer Serie ist und es am besten ist, zuerst mit dem Erlernen des Stil-Markups zu beginnen, und zwar mit einem Artikel darüber, was CSS ist und womit es gegessen wird. Es liegt zwar auf jeden Fall an Ihnen, aber jetzt sprechen wir über das Einstellen des Hintergrunds.
Farbe, Hintergrundfarbe und Hintergrundbild
Lassen Sie uns zunächst sehen, wie die Farbe der HTML-Elemente mithilfe von festgelegt wird CSS-Farbregeln... Tatsächlich ist hier alles einfach. Die Syntax ist völlig normal und Sie können die Farbe entsprechend der Vorgehensweise in der Hypertext-Markup-Sprache einstellen. Wie Sie sich erinnern, nach dem Hash-Zeichen (Hash - "# fe35a3") oder mit drei Ziffern platziert, wenn die erste mit dem Wert der zweiten übereinstimmt, die dritte mit der vierten, gut und die fünfte mit der sechsten (Farbcode "# aa33ff"). kann als "a3f" abgekürzt werden).
Auch Farben in HTML- und CSS-Code können als Wörter dargestellt werden (z. B. "rot"), aber der hexadezimale Code wird am häufigsten verwendet:
Farbe: # 303
Als Beispiel habe ich diesen kleinen Absatz in der gleichen Farbe wie oben (# 303) gefärbt. Es unterscheidet sich jetzt geringfügig von der Farbe aller anderen Absätze (dunkler), die in der CSS-Datei des von mir verwendeten WordPress-Themas als # 555 festgelegt ist. Das Einstellen der Farbe durch die Farbe ist recht einfach, aber mit dem Hintergrund wird es etwas komplizierter.
Damit, für Hintergrund in CSS Es gibt fünf Regeln, die auf Wunsch zu einem Team zusammengefasst werden können. Um sie zu sehen, können Sie auf die Seite der aktuellen W3C-Spezifikation gehen und nach etwas mit dem Wort Hintergrund suchen:
- hintergrundfarbe - Diese Regel legt die Hintergrundfarbe für jedes HTML-Element fest. Darin können Sie entweder den Code oder den Namen des Farbtons verwenden, d. H. Alles ist genau so, wie es bei der Verwendung von Farbe war.
hintergrundbild - damit können Sie ein Bild als Hintergrundbild verwenden (lesen Sie dies jedoch unbedingt durch, da schwere Bilder das Laden von Seiten verlangsamen), dessen Pfad in der Funktion url () angegeben wird.
Wenn Sie sich die Spezifikation ansehen, werden Sie das sehen standardhintergrundfarbe Jedes Element ist transparent (der Standardwert der Regel ist "Hintergrundfarbe: transparent"). In Elementen ist es jedoch standardmäßig nicht transparent, da Dies sind Systemelemente und sie haben alles anders und anders als die üblichen Tags der Hypertext-Markup-Sprache.
Die Hintergrundfarbe ist standardmäßig festgelegt (sechs oder drei hexadezimale Ziffern oder ein Wort):
Hintergrundfarbe: #FEFCDE
Zum Beispiel wird der Hintergrund dieses Absatzes genau durch die Hintergrundfarbe mit dem oben angegebenen Farbcode eingestellt.
Alle anderen vier CSS-Regeln betreffen nur das Hintergrundbild, das für jedes HTML-Element festgelegt und bei Bedarf präzise positioniert werden kann. Welche Grafikdatei verwendet wird, kann mit eingestellt werden hintergrundbild.
Wenn Sie sich die Sprachspezifikation für Stil-Markups ansehen, werden Sie feststellen, dass das Standard-Hintergrundbild "none" ist (dh es wird kein Hintergrundbild verwendet). Wenn Sie es noch benötigen, müssen Sie in der Funktion url () den Pfad dazu angeben:
Hintergrundbild: URL (https: //site/image/comment_top_focus.gif);
Für diesen Absatz habe ich beispielsweise eine Grafikdatei mit Hintergrund verwendet, deren Pfad oben beschrieben wurde. Sie können sehen, dass der gesamte für diesen Absatz zugewiesene Bereich mit einem sich wiederholenden Bild bedeckt ist, das im Original folgendermaßen aussieht:
Jene. Wenn Sie nur eine Hintergrundbildregel mit dem Pfad zur Grafikdatei verwenden, wird dieses Bild sowohl vertikal als auch horizontal multipliziert, bis es den gesamten Bereich abdeckt, der auf der Webseite für dieses bestimmte HTML-Element zugewiesen ist (in unserem Beispiel war es ein Absatz). Warum passiert es?
Hintergrundwiederholung - Wiederholen Sie das Hintergrundbild
Ja, da wir keinen Wert für die CSS-Regel geschrieben haben hintergrund WiederholungDies bedeutet, dass der Standardwert dafür verwendet wird. Wenn wir uns die Spezifikation ansehen, stellen wir fest, dass dieser Wert "Wiederholen" entspricht (Wiederholen des Bildes entlang aller Achsen). Die Antwort kam von selbst.
Daher können wir mit Hintergrundwiederholung wiederholungen des Hintergrundbildes verwalten... Diese Regel kann nur vier Werte haben:
Hintergrundposition - Positionierung des Hintergrunds
Nun stellt sich die Frage, ob es möglich ist, das Hintergrundbild von der oberen linken Ecke des Bereichs weg zu verschieben, wodurch die Größe des Elements begrenzt wird. Natürlich können Sie das, und zu diesem Zweck gibt es eine separate Regel hintergrundposition:
Anhand der CSS-Spezifikation wird deutlich, warum das Standardhintergrundbild genau am oberen linken Rand des Bereichs des HTML-Elements eingebettet ist. Weil der Wert "0% 0%" die Standardeinstellung für die Hintergrundpositionsregel ist.
Wenn diese Regel nicht explizit für ein Element festgelegt ist (wie in unserem Fall), wählt der Browser seinen Wert aus, der standardmäßig in der Spezifikation akzeptiert wird (beachten Sie, dass die Koordinatenachsen in CSS nur am oberen linken Rand des Bereichs gemeldet werden Element).
Sie können der Spezifikation auch entnehmen, dass sowohl relative (Prozent) als auch absolute Werte (zum Beispiel) verwendet werden können, um das Hintergrundbild mithilfe der Hintergrundposition zu positionieren. Sie können auch Wörter verwenden, die bestimmten numerischen Werten entsprechen. Aber das Wichtigste zuerst.
Beim Einstellen der Positionierung des Hintergrundbildes mit absoluten Einheiten Die Hintergrundposition hat das folgende Prinzip zur Bestimmung ihrer endgültigen Position:
Jene. Der Browser berechnet die angegebenen Offsets entlang der X- und Y-Achse vom Ursprung des Bereichs, in dem sich das Objekt befindet, bis zum Ursprung dieses Bildes. In diesem Absatz habe ich beispielsweise das Hintergrundbild über die Hintergrundposition mithilfe der folgenden CSS-Regeln positioniert:
Hintergrundbild: URL (https: //site/image/logo.png); Hintergrundwiederholung: keine Wiederholung; Hintergrundposition: 400px 25px;
Bitte beachten Sie, dass es in diesem Fall an der Mitte des Ansichtsfensters und nicht an der Mitte des für diese Absätze zugewiesenen Bereichs ausgerichtet ist. Es ist klar, dass eine solche Anordnung des Hintergrundbildes in der Realität wahrscheinlich keine Anwendung findet.
Wenn Sie jedoch eine feste Hintergrundposition für Elemente wie Body oder Html festlegen (d. H. In Tags, die die gesamte Webseite abdecken), wird dieses Bild immer im Ansichtsfenster angezeigt, und genau darin befindet sich die CSS-Eigenschaft für Hintergrundanhänge modernes Blocklayout.
Gibt es noch mehr fertigregel HintergrundDamit können Sie alle fünf oben beschriebenen Regeln in einer Flasche kombinieren. Darüber hinaus können die Werte für alle fünf in der kombinierten Version in beliebiger Reihenfolge und in beliebiger Menge verwendet werden (sie sind eindeutig und werden vom Browser nicht miteinander verwechselt). Alles, was Sie nicht explizit angeben, wird vom Browser als gleich dem Standardwert betrachtet.
Png) keine Wiederholung 50%;
Die im Beispiel gezeigte Montageregel wird aus Gründen der Übersichtlichkeit auf diesen Absatz angewendet. Es stellte sich als nicht schön heraus, aber das ist nicht die Hauptsache. Für diesen Absatz wird eine seltsame gelbe Hintergrundfüllung sowie ein Bild des LiveInternet-Logos verwendet, das in der Mitte des Absatzes ausgerichtet ist. weil Für die Hintergrundanhangsregel wird kein Wert angegeben, dann wird der Standard-Bildlaufwert verwendet.
Wenn Sie für ein Element nur eine Füllung mit Farbe festlegen möchten und sich nicht um das Hintergrundbild kümmern möchten, können Sie stattdessen Folgendes tun:
Hintergrundfarbe: #FEFCDE
schreiben:
Hintergrund: #FEFCDE
Für den Rest wird der Wert der kombinierten Regel standardmäßig verwendet, und genau das haben Sie benötigt.
Viel Erfolg! Bis bald auf den Seiten der Blog-Site
Du könntest interessiert sein
Listenstil (Typ, Bild, Position) - CSS-Regeln zum Anpassen des Erscheinungsbilds von Listen im HTML-Code Einrichten der abwechselnden Hintergrundfarbe von Zeilen mit Tabellen, Listen und anderen HTML-Elementen auf einer Site mithilfe der Pseudoklasse des n-ten Kindes 
Position (absolut, relativ und fest) - Möglichkeiten zum Positionieren von HTML-Elementen in CSS (Regeln links, rechts, oben und unten) 
In CSS-Block-Layout-Tools schweben und löschen 
Positionierung mit Z-Index und CSS-Cursor-Regel zum Ändern des Mauszeigers 
Auffüllen, Rand und Rand - Wir legen interne und externe Ränder in CSS sowie Ränder für alle Seiten fest (oben, unten, links, rechts). 
Anzeige (Block, keine, Inline) in CSS - Legen Sie die Art der Anzeige von HTML-Elementen auf der Webseite fest 
CSS-Prioritäten und Boosting mit wichtigen, Selektorkombinationen und -gruppierungen, benutzerdefinierten und Autorenstilen 
CSS - Was ist das? Wie werden kaskadierende Stylesheets mithilfe von Style und Link mit HTML-Code verknüpft? 
Tag-, Klassen-, ID- und generische Selektoren sowie Attribut-Selektoren in modernem CSS