Passen Sie den Hintergrund mit CSS an. Hintergrund in CSS (Farbe, Position, Bild, Wiederholung, Anhang) – alles zum Festlegen der Hintergrundfarbe oder des Hintergrundbilds von HTML-Elementen. Bild als Hintergrund
Ich denke, es gibt keinen einzigen Standort, an dem die Immobilie nicht genutzt werden würde CSS-Hintergrund. Es scheint, was könnte einfacher sein als diese Immobilie? Aber nein, die Möglichkeiten sind viel umfassender als die übliche Einstellung eines Bildes oder einer Farbe als Seitenhintergrund. Einige werden bekannt sein, andere werden für viele neu sein. In jedem Fall ist es hilfreich, genau zu wissen, wie der Hintergrund funktioniert.
CSS3 brachte viele neue Dinge in die Eigenschaft, wie zum Beispiel Transparenz und das Festlegen mehrerer Bilder als Hintergrund, aber darüber werden wir weiter unten sprechen, aber zuerst werden wir die Grundlagen der Eigenschaft behandeln Hintergrund.
Hintergrundfarbe
Ich bin mir ziemlich sicher, dass Sie die Zuweisung der Hintergrundfarbe bereits mehrmals durchgeführt haben. Dies kann mithilfe verschiedener Notationsarten erfolgen: regulärer (der Farbname wird verwendet), hexadezimaler oder RGB-Notation. Jeder Typ ist gleichwertig. Verwenden Sie den, der Ihnen am besten gefällt. Ich versuche, die kürzeste Version zu verwenden, die für die Wahrnehmung einfacher ist und die Stildatei etwas kleiner ist.
P (Hintergrundfarbe: rot;) p (Hintergrundfarbe: #f00;) p (Hintergrundfarbe: #ff0000;) p (Hintergrundfarbe: rgb(255, 0, 0;))
CSS3 führt Transparenzunterstützung ein, sodass wir sie wie folgt zu unserer Farbe hinzufügen können:
P (Hintergrundfarbe: rgba(255, 0, 0, 0.5);)
Die letzte Ziffer setzt die Transparenz auf 50 %. Sie können den Transparenzwert von 0 (vollständig) einstellen transparenter Hintergrund) auf 1 (völlig undurchsichtig).
Hintergrundbild
Auch diese Eigenschaft wird sehr oft verwendet, sie ermöglicht es, dem Hintergrund ein Bild zuzuordnen. CSS3 bietet die Möglichkeit, mehrere Bilder einem Hintergrund zuzuordnen, wobei jedes eine Art Ebene erstellt, sodass jedes nachfolgende Bild das vorherige überlappt. Warum könnte das nützlich sein? Alles ist ganz einfach – sagen wir, Sie müssen in jeder Ecke der Baustelle kleine Dinge anschrauben. Unter der Voraussetzung eines mehr oder weniger flüssigen Layouts ist die Verwendung eines einzigen Bildes keine Option. Deshalb erstellen wir 4 „Ebenen“, verschieben jedes Bild in seine eigene Ecke und das Problem ist gelöst
Körper (Hintergrundbild: url("image1"), url("image2"), url("image3"))
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 das Bild aus irgendeinem Grund nicht sieht. Es kann die Anzeige von Bildern einfach deaktivieren, spart Verkehr.
- Verwenden Sie kein Hintergrundbild, um etwas zu vermitteln wichtige Informationen. Aus dem oben genannten Grund kann es sein, dass der Benutzer es nicht sieht.
Die Unterstützung für mehrere Hintergrundbilder ist recht umfangreich. Alle Browser, auch IE8, unterstützen diese Eigenschaft.
Brief Information
CSS-Versionen
Werte
url Der Wert ist der Pfad zur Grafikdatei, der im url()-Konstrukt angegeben wird. In diesem Fall kann der Pfad zur Datei sowohl in Anführungszeichen (doppelt oder einfach) als auch ohne Anführungszeichen geschrieben werden. none Hebt das Hintergrundbild für das Element auf. inherit Erbt den Wert des übergeordneten Elements.HTML5 CSS2.1 IE Cr Op Sa Fx
Objektmodell
document.getElementById("elementID").style.backgroundImage
Browser
Internet Explorer Bis einschließlich Version 7.0 wird ein Hintergrund auf die Innenseite des Rahmens eines Elements angewendet, für das die hasLayout-Eigenschaft festgelegt ist. Wenn das Element kein hasLayout hat, berücksichtigt die Eigenschaft „Hintergrundbild“ die in der Spezifikation angegebenen Ränder des Elements. Der Unterschied in der Darstellung macht sich bemerkbar, wenn die Ränder gestrichelt (gestrichelt oder gepunktet) und nicht durchgezogen sind.
Wenn das Element auf scroll oder auto eingestellt ist, kommt es in Internet Explorer 8 beim Scrollen des Hintergrunds zu einer vertikalen Verzögerung von einem Pixel.
Internet Explorer bis Version 7.0 unterstützt den Vererbungswert nicht.
Wenn der Hintergrund für eine Tabellenzeile (tag
HTML5 CSS2.1 IE Cr Op Sa Fx
| 1 | 2 | 3 |
Ergebnis dieses Beispiel V Chrome-Browser in Abb. dargestellt. 1. Internet-Browser Explorer, Opera und Firefox zeigen den Hintergrund für die Zeile korrekt an (Abb. 2).
Reis. 1. Wiederholen Sie den Hintergrund für jede Zelle
Reis. 2. Hintergrund für die gesamte Linie
Hallo, liebe Leser der Blogseite. Heute schauen wir uns fünf CSS-Regeln an, mit denen Sie den Hintergrund für jedes Element in HTML festlegen können – Hintergrundposition (Bild, Wiederholung, Farbe, Anhang). Vergessen wir nicht, die zusammengesetzte Hintergrundregel zu erwähnen.
Daran ist nichts Schwieriges, aber es gibt bestimmte Feinheiten und Nuancen, die Sie bereits kennen müssen fertige Vorlage(Denken Sie daran, was dabei hilft, alle Vor- und Nachteile eines Designs zu enthüllen.)
Ich möchte Sie noch einmal daran erinnern, dass dieser Artikel Teil einer Reihe ist und es am besten ist, mit dem Studium des Stil-Markups von Anfang an zu beginnen, nämlich mit einem Artikel darüber, was CSS ist und womit es gegessen wird, und dann der Reihenfolge folgen im Nachschlagewerk angegeben. Obwohl es in jedem Fall an Ihnen liegt, sprechen wir nun über die Festlegung des Hintergrunds.
Farbe, Hintergrundfarbe und Hintergrundbild
Schauen wir uns zunächst an, wie die Farbe eingestellt wird HTML-Elemente mit Hilfe CSS-Farbregeln. Eigentlich ist hier alles einfach. Die Syntax ist völlig normal und Sie können die Farbe entsprechend der Vorgehensweise in der Hypertext-Auszeichnungssprache festlegen. Wie Sie sich erinnern, wird es nach dem Hash-Zeichen (Hash - „#fe35a3“) oder mit Hilfe von drei Ziffern platziert, wenn die erste mit dem Wert der zweiten übereinstimmt, die dritte mit dem vierten bzw. dem fünften. mit dem sechsten (Farbcode „#aa33ff“ kann als „a3f“ abgekürzt werden).
Gleiche Farben in HTML und CSS-Code Es ist möglich, es in Form von Wörtern darzustellen (z. B. „rot“), am häufigsten wird jedoch der Hexadezimalcode verwendet:
Farbe:#303
Als Beispiel habe ich diesen kleinen Absatz in der gleichen Farbe wie oben (#303) eingefärbt. Sie unterscheidet sich jetzt geringfügig von der Farbe aller anderen Absätze (dunkler), die auf #555 in eingestellt ist CSS-Datei von mir verwendet WordPress-Themes. Das Festlegen der Farbe über die Farbe ist jedoch recht einfach, beim Hintergrund wird es jedoch etwas komplizierter.
So, für Hintergrund in CSS erfüllen 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 dort nach etwas mit dem Wort Hintergrund suchen:
- Hintergrundfarbe – diese Regel legt die Hintergrundfarbe für jedes HTML-Element fest. Sie können darin 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 Hintergrund verwenden (lesen Sie sich aber unbedingt darüber durch, da umfangreiche Bilder das Laden der Seite verlangsamen), dessen Pfad in der URL()-Funktionalität angegeben wird.
Wenn Sie sich die Spezifikation ansehen, werden Sie das sehen Standardhintergrundfarbe Jedes Element ist transparent (der Standardwert der Regel ist „background-color:transparent“). Es stimmt, in den Elementen ist es standardmäßig nicht transparent, weil. Dies sind Systemelemente, und für sie ist alles anders und unterscheidet sich von gewöhnlichen Hypertext-Markup-Language-Tags.
Die Farbe in Hintergrundfarbe ist standardmäßig eingestellt (sechs oder drei Ziffern). Hex-Code, oder ein Wort):
Hintergrundfarbe:#FEFCDE
Beispielsweise wird der Hintergrund dieses Absatzes durch die Hintergrundfarbe mit dem oben angegebenen Farbcode genau festgelegt.
Alle anderen vier CSS-Regeln gelten nur für das Hintergrundbild, das für jedes HTML-Element festgelegt und auf Wunsch exakt positioniert werden kann. Welche Grafikdatei verwendet wird, kann über festgelegt werden Hintergrundbild.
Wenn Sie sich die Spezifikation der Style-Markup-Sprache ansehen, werden Sie feststellen, dass „background-image“ standardmäßig auf „none“ eingestellt ist (d. h. es wird kein Hintergrundbild verwendet). Nun, wenn Sie es noch benötigen, müssen Sie in der URL()-Funktionalität 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 ist. Sie können sehen, dass der gesamte für diesen Absatz reservierte Bereich mit einem sich wiederholenden Bild bedeckt ist, das im Original so aussieht:
Diese. Wenn Sie nur eine Hintergrundbildregel verwenden, die den Pfad zur Grafikdatei angibt, wird genau dieses Bild sowohl vertikal als auch horizontal reproduziert, bis es den gesamten Bereich abdeckt, der auf der Webseite für dieses bestimmte HTML-Element vorgesehen ist (in unserem Beispiel war es ein Absatz). Warum passiert das?
Hintergrundwiederholung – Hintergrundbild wiederholen
Ja, da wir keinen Wert für die CSS-Regel geschrieben haben Hintergrund Wiederholung, was bedeutet, dass dafür der Standardwert verwendet wird. Wenn wir uns die Spezifikation ansehen, stellen wir fest, dass dieser Wert „repeat“ (Wiederholung des Bildes in allen Achsen) entspricht. Die Antwort kam von selbst.
Deshalb können wir mit Hintergrundwiederholung Verwalten Sie Hintergrundbildwiederholungen. Diese Regel kann nur vier Werte haben:
Hintergrundposition – Position des Hintergrunds
Nun stellt sich die Frage, ob es möglich ist, das Hintergrundbild aus der oberen linken Ecke des Bereichs zu verschieben, wodurch die Größe des Elements begrenzt wird. Natürlich können Sie das, und dafür gibt es eine gesonderte Regelung Hintergrundposition:
Beim Blick auf die CSS-Spezifikation wird deutlich, warum das Standard-Hintergrundbild genau an den oberen linken Rand des Html-Elementbereichs gedrückt wird. Denn der Wert „0 % 0 %“ ist der Standardwert für die Hintergrundpositionsregel.
Wenn diese Regel nicht explizit für das Element festgelegt ist (wie in unserem Fall), wählt der Browser seinen Wert aus, der in der Standardspezifikation akzeptiert wird (ich stelle fest, dass die Koordinatenachsen in CSS nur vom oberen linken Rand gemeldet werden). des Flächenelements).
Aus der Spezifikation ist auch ersichtlich, dass sowohl relative (Prozent) als auch absolute Werte (z. B.) verwendet werden können, um das Hintergrundbild mithilfe der Hintergrundposition zu positionieren. Nun, Sie können auch Wörter verwenden, die bestimmten digitalen Werten entsprechen. Aber das Wichtigste zuerst.
Beim Festlegen der Position des Hintergrundbilds unter Verwendung absoluter Einheiten background-position hat das folgende Prinzip zur Bestimmung seiner endgültigen Position:
Diese. Der Browser berechnet die angegebenen Versätze entlang der X- und Y-Achse vom Ursprung des Bereichs, in dem das Objekt positioniert ist, zum Ursprung dieses Bildes selbst. In diesem Absatz habe ich beispielsweise das Hintergrundbild über die Hintergrundposition mithilfe der folgenden CSS-Regeln positioniert:
Hintergrundbild:url(https://website/image/logo.png); Hintergrundwiederholung:keine Wiederholung; Hintergrundposition:400px 25px;
Bitte beachten Sie, dass in diesem Fall die Ausrichtung auf die Mitte des Ansichtsfensters ausgerichtet wird und nicht auf die Mitte des für diese Absätze reservierten Bereichs. Es ist klar, dass eine solche Platzierung eines Hintergrundbilds in der Realität wahrscheinlich nicht verwendet wird.
Wenn Sie jedoch für Elemente wie Body oder Html eine feste Hintergrundposition festlegen (also in Tags, die die gesamte Webseite abdecken), dann ist dieses Bild immer im Viewport sichtbar und genau das wird verwendet CSS-Eigenschaft Hintergrundanhang im modernen Blocklayout.
Gibt es noch mehr? Hintergrund der vorgefertigten Regeln, wodurch Sie alle fünf oben beschriebenen Regeln in einer Flasche vereinen können. Darüber hinaus können die Werte für alle fünf in der kombinierten Version in beliebiger Reihenfolge und Menge verwendet werden (sie sind eindeutig und der Browser wird sie nicht miteinander verwechseln). Alles, was Sie nicht explizit angeben, wird vom Browser als Standardwert betrachtet.
Png) keine Wiederholung 50 %;
Aus Gründen der Übersichtlichkeit wird auf diesen Absatz die im Beispiel gezeigte Montageregel angewendet. Es ist nicht schön geworden, aber darum geht es nicht. Dieser Absatz verwendet eine seltsame gelbe Hintergrundfarbe und ein Bild des LiveInternet-Logos, das in der Mitte des Absatzes ausgerichtet ist. Weil Für die Hintergrundanhangsregel ist kein Wert festgelegt, dann wird Scrollen (Standard) verwendet.
Wenn Sie für ein Element nur die Füllung mit Farbe festlegen möchten und sich nicht um das Hintergrundbild kümmern möchten, können Sie dies stattdessen tun:
Hintergrundfarbe:#FEFCDE
schreiben:
Hintergrund:#FEFCDE
Für alle anderen Werte wird standardmäßig die vorgefertigte Regel übernommen, die Sie benötigen.
Viel Erfolg! Bis bald auf der Website der Blog-Seiten
Sie könnten interessiert sein
Listenstil (Typ, Bild, Position) – CSS-Regeln zum Anpassen der Darstellung von Listen im HTML-Code So ändern Sie die Hintergrundfarbe der Zeilen von Tabellen, Listen und anderen HTML-Elementen auf der Site mithilfe der Pseudoklasse „nth-child“. 
Position (absolut, relativ und fest) – Möglichkeiten zur Positionierung von HTML-Elementen in CSS (Regeln für links, rechts, oben und unten) 
Float und Clear in CSS – Blocklayout-Tools 
Positionierung mit Z-Index und CSS-Regel Cursor zum Ändern des Mauszeigers 
Polsterung, Rand und Rand – eingestellt CSS intern und Ränder sowie Ränder für alle Seiten (oben, unten, links, rechts) 
Anzeige (Block, Keine, Inline) in CSS – Legen Sie den Anzeigetyp von HTML-Elementen auf einer Webseite fest 
Prioritäten in CSS und ihre Erhöhung aufgrund von Wichtigkeit, Kombination und Gruppierung von Selektoren, Benutzer- und Autorenstilen 
CSS – was ist das, wie werden Cascading Stylesheets miteinander verbunden? HTML Quelltext mit Stil und Link 
Tag-, Klassen-, ID- und universelle Selektoren sowie Attributselektoren in modernem CSS
Vom Autor: Ich heiße jeden willkommen. Hintergrundfarben und -bilder spielen im Webdesign eine große Rolle, da sie es Ihnen ermöglichen, jedes Element attraktiver zu gestalten. Wie man einen Hintergrund in HTML erstellt, werden wir uns heute ansehen.
Ist es möglich, beim Festlegen des Hintergrunds mit HTML auszukommen?
Ich sage Ihnen gleich, dass das nicht der Fall ist. Im Allgemeinen ist HTML nicht für die Gestaltung von Webseiten konzipiert. Es ist einfach sehr unbequem. Beispielsweise gibt es ein bgcolor-Attribut, mit dem die Hintergrundfarbe festgelegt werden kann. Dies ist jedoch sehr unpraktisch.
Dementsprechend werden wir Cascading Style Sheets (CSS) verwenden. Es gibt viel Weitere Möglichkeiten um den Hintergrund festzulegen. Heute werden wir die grundlegendsten analysieren.
Wie stelle ich den Hintergrund mit CSS ein?
Sie müssen also zunächst entscheiden, für welches Element Sie den Hintergrund festlegen möchten. Das heißt, wir müssen den Selektor finden, in den wir die Regel schreiben. Wenn Sie beispielsweise den Hintergrund für die gesamte Seite festlegen müssen, können Sie dies über den Body-Selektor und für alle Blöcke über den Div-Selektor tun. Na ja, usw. Der Hintergrund kann und sollte an alle anderen Selektoren angehängt werden: Stilklassen, Bezeichner usw.
Nachdem Sie sich für den Selektor entschieden haben, müssen Sie den Namen der Immobilie selbst eingeben. Um die Hintergrundfarbe festzulegen (nämlich eine Volltonfarbe, keinen Farbverlauf und kein Bild), wird die Eigenschaft „Hintergrundfarbe“ verwendet. Danach müssen Sie einen Doppelpunkt einfügen und die Farbe selbst schreiben. Dies kann auf unterschiedliche Weise erfolgen. Verwenden Sie beispielsweise Schlüsselwörter, Hex-Code, RGB-, RGBA- und HSL-Formate. Jede Methode reicht aus.
Die am häufigsten verwendete Methode ist der Hexadezimalcode. Um Farben auszuwählen, können Sie ein Programm verwenden, in dem Sie den Farbcode sehen können. Zum Beispiel Photoshop, Paint oder ein Online-Tool. Dementsprechend werde ich beispielsweise einen gemeinsamen Hintergrund für die gesamte Webseite vorgeben.
body( Hintergrundfarbe: #D4E6B3; )
Dieser Code muss im Kopfbereich eingefügt werden. Wichtig ist, dass sich die Dateien im selben Ordner befinden.
Bild als Hintergrund
Für das Bild verwende ich ein kleines HTML-Sprachsymbol:
Erstellen wir einen leeren Block mit einer ID:
< div id = "bg" > < / div > |
Geben wir ihm explizite Dimensionen und einen Hintergrund:
#bg( Breite: 400px; Höhe: 250px; Hintergrundbild: url(html.png); )
#bg( Breite: 400 Pixel Höhe: 250px Hintergrundbild: URL (html.png); |
Anhand dieses Codes können Sie erkennen, dass ich eine neue Eigenschaft namens „Hintergrundbild“ verwendet habe. Es ist lediglich zum Einfügen eines Bildes als Hintergrund in ein HTML-Element gedacht. Lass uns nachsehen, was passiert ist:
Um ein Bild anzugeben, müssen Sie nach dem Doppelpunkt schreiben Stichwort URL und geben Sie dann in Klammern den Pfad zur Datei an. In diesem Fall wird der Pfad auf der Grundlage der Tatsache angegeben, dass sich das Bild im selben Ordner wie das HTML-Dokument befindet. Sie müssen auch das Bildformat angeben.
Wenn Sie dies getan haben und der Hintergrund immer noch nicht im Block angezeigt wird, überprüfen Sie noch einmal, ob Sie den Namen des Bildes richtig geschrieben haben, ob Pfad und Erweiterung richtig eingestellt sind. Dies sind die häufigsten Gründe dafür, dass der Hintergrund einfach nicht angezeigt wird, weil der Browser das Bild nicht finden kann.
Aber ist Ihnen eine Besonderheit aufgefallen? Der Browser hat das Bild im gesamten Block aufgenommen und multipliziert. Nur damit Sie es wissen: Dies ist das Standardverhalten von Hintergrundbildern – sie wiederholen sich vertikal und horizontal, solange sie in den Block passen. Mit diesem Verhalten können Sie problemlos umgehen. Verwenden Sie dazu die Eigenschaft „background-repeat“, die vier Hauptwerte hat:
Wiederholen – der Standardwert, das Bild wird auf beiden Seiten wiederholt;
Repeat-x – wiederholt sich nur auf der x-Achse;
Repeat-y – wiederholt sich nur entlang der y-Achse;
No-repeat – wird überhaupt nicht wiederholt;
Sie können jeden Wert schreiben und sehen, was passiert. Ich werde so schreiben:
Hintergrundwiederholung: Wiederholung-x;
Hintergrund-Wiederholung: Wiederholung - x; |
Jetzt nur noch horizontal wiederholen. Wenn Sie keine Wiederholung schreiben, gäbe es nur ein Bild.
Großartig, wir können damit abschließen, da dies die grundlegenden Funktionen für die Arbeit mit dem Hintergrund sind, aber ich zeige Ihnen zwei weitere Eigenschaften, die Ihnen mehr Steuerungsmöglichkeiten ermöglichen.
Mit der Wiederholung gelang es Programmierern früher, Hintergrundtexturen und Farbverläufe mithilfe eines winzigen Bildes zu erstellen. Es könnte 30 x 10 Pixel oder noch kleiner sein. Oder vielleicht ein bisschen mehr. Das Bild war so gestaltet, dass bei der Wiederholung auf einer oder sogar auf beiden Seiten keine Übergänge sichtbar waren, so dass am Ende ein einziger einfarbiger Hintergrund entstand. Übrigens sollte dieser Ansatz jetzt verwendet werden, wenn Sie ihn verwenden möchten nahtlose Textur auf Ihrer Website als Hintergrund. Der Farbverlauf kann heute bereits mit CSS3-Methoden implementiert werden, darüber werden wir später auf jeden Fall sprechen.
Hintergrundposition
Standardmäßig befindet sich das Hintergrundbild, wenn es nicht auf Wiederholung eingestellt ist, in der oberen linken Ecke seines Blocks. Die Position kann jedoch einfach mit der Eigenschaft „Hintergrundposition“ geändert werden.
Sie können es auf verschiedene Arten fragen. Eine Möglichkeit besteht darin, einfach die Seiten anzugeben, auf denen das Bild angezeigt werden soll:
Hintergrundposition: rechts oben;
Hintergrundposition: rechts oben; |
Das heißt, vertikal ist alles beim Alten geblieben: Das Hintergrundbild befindet sich oben, aber horizontal haben wir die Seite nach rechts, also nach rechts, geändert. Eine andere Möglichkeit, die Position festzulegen, ist die Angabe in Prozent. 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 es also folgendermaßen:
Hintergrundposition: 50 % 50 %;
Hintergrundposition: 50 % 50 %; |
Bei der Positionierung ist es wichtig, sich daran zu erinnern, dass der erste Parameter immer die horizontale Position und der zweite Parameter die vertikale Position ist. Wenn Sie also einen Wert von 80 % 20 % sehen, können Sie sofort daraus schließen, dass das Hintergrundbild stark nach rechts verschoben wird, aber nicht viel nach unten geht.
Und schließlich können Sie die Position in Pixeln angeben. Alles ist gleich, nur dass anstelle von % px steht. In manchen Fällen kann eine solche Positionierung auch notwendig sein.
Verkürzte Schreibweise
Stimmen Sie zu, dass sich der Code als ziemlich umständlich herausstellt, wenn alles so eingestellt ist, wie wir es gemacht haben. Es stellt sich heraus, dass der Weg zum Bild festgelegt werden muss, die Wiederholung und die Position. Natürlich sind Wiederholung und Position nicht immer notwendig, aber auf jeden Fall wäre es korrekter, die Abkürzung der Eigenschaft zu verwenden. Sie sieht so aus:
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 einfarbige Hintergrundfarbe aufzuzeichnen. Dann der Weg zum Bild, Wiederholung und Position. Wenn ein Parameter nicht benötigt wird, lassen Sie ihn einfach weg. Stimmen Sie zu, das ist viel schneller und bequemer, und wir reduzieren auch unseren Code erheblich. Generell rate ich Ihnen, immer gekürzt zu schreiben, auch wenn Sie nur eine Farbe oder ein Bild angeben müssen.
Steuern der Größe des Hintergrundbilds
Unser aktuelles Bild eignet sich nicht besonders gut für den nächsten Trick, also nehme ich ein anderes. Die Größe sollte einem Block ähneln oder größer sein. Stellen Sie sich also vor, Sie stehen vor der Aufgabe, ein Hintergrundbild so zu gestalten, dass es seinen Block nicht vollständig ausfüllt. Und das Bild ist zum Beispiel sogar größer als der Block.
Was kann man in so einem Fall tun? Die einfachste und sinnvollste Möglichkeit wäre natürlich, das Bild einfach zu verkleinern, aber das ist nicht immer möglich. Nehmen wir an, es liegt auf dem Server und in dieser Moment Es gibt keine Zeit und Gelegenheit, es zu reduzieren. Das Problem lässt sich mit Hilfe der Eigenschaft „background-size“ lösen, die als relativ neu bezeichnet werden kann und mit der man die Größe manipulieren kann Hintergrundbild, und zwar jeden Hintergrund.
Mein Bild nimmt jetzt also den gesamten Platz im Block ein, aber ich gebe ihm eine Hintergrundgröße:
Hintergrundgröße: 80 % 50 %;
Hintergrundgröße: 80 % 50 %; |
Auch hier ist der erste Parameter die horizontale Größe, der zweite die vertikale Größe. Wir sehen, dass alles korrekt angewendet wurde – das Foto hat in der Breite 80 % und in der Höhe die Hälfte der Blockbreite erreicht. Hier müssen Sie nur eine Klarstellung vornehmen: Durch die Angabe der Größe in Prozent können Sie die Proportionen des Bildes beeinflussen. Seien Sie also vorsichtig, wenn Sie die Proportionen nicht zerstören möchten.
Wie Sie sich vorstellen können, kann die Hintergrundgröße auch in Pixel angegeben werden. Es gibt außerdem zwei Wertschlüsselwörter, die ebenfalls verwendet werden können:
Cover – Das Bild wird so skaliert, dass mindestens eine Seite den Block vollständig ausfüllt.
Einschließen – Skaliert so, dass das Bild bei maximaler Größe vollständig in den Block passt.
Der Vorteil dieser Werte besteht darin, dass sie die Proportionen des Bildes nicht verändern und somit gleich bleiben.
Sie sollten sich auch darüber im Klaren sein, dass eine Dehnung des Bildes zu einer Verschlechterung der Bildqualität führen kann. Ich kann ein Beispiel aus dem Leben und der Praxis von Layoutern geben. Jeder weiß und versteht, dass Sie beim Entwerfen für Desktops die Site an die Hauptmonitorbreiten anpassen müssen: 1280, 1366, 1920. Wenn Sie ein Hintergrundbild in der Größe beispielsweise 1280 x 200 nehmen und keine Hintergrundgröße festlegen Wenn dann Bildschirme angezeigt werden, deren Breite größer als ein leerer Raum ist, füllt das Bild die Breite nicht vollständig aus.
In 99 % der Fälle passt dies dem Webentwickler nicht, daher stellt er „background-size: cover“ so ein, dass das Bild immer auf die maximale Breite des Fensters gestreckt wird. Das ist zwar ein guter Trick, aber nun stoßen Sie auf das Problem, dass Benutzer mit einer Bildschirmbreite von 1920 Pixeln möglicherweise eine nicht optimale Bildqualität sehen.
Ich erinnere Sie daran, dass es bis zur maximalen Breite gedehnt wird. Dementsprechend verschlechtert sich automatisch die Qualität. Die einzig richtige Lösung wäre hier, zunächst ein größeres Bild zu verwenden – 1920 Pixel breit. Dann wird es auf den breitesten Bildschirmen in seiner natürlichen Größe angezeigt, auf anderen wird es einfach langsam, aber gleichzeitig mit einer kompetenten Auswahl des Hintergrundbilds abgeschnitten Aussehen Die Website wird nicht beeinträchtigt.
Alles in allem ist dies nur ein Beispiel dafür, wie Sie das in diesem Artikel erworbene Wissen auf reale Layouts anwenden können.
durchscheinender Hintergrund mit CSS
Eine weitere Funktion, die mit implementiert werden kann CSS- durchscheinender Hintergrund. Das heißt, durch diesen Hintergrund wird es möglich sein zu erkennen, was sich dahinter verbirgt.
Als Beispiel stelle ich den Hintergrund der gesamten Seite auf das Bild ein, 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 mithilfe des RGBA-Farbeinstellungsformats fest.
Wie ich bereits sagte, gibt es in CSS viele Formate zum Festlegen von Farben. Einer davon ist RGB, genug bekanntes Format diejenigen, die in Grafikeditoren arbeiten. Es wird so geschrieben: rgb(17, 255, 34);
Der erste Wert in Klammern ist die Sättigung von Rot, dann von Grün und dann von 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 vollständige Transparenz bedeutet.
