Kleuren en achtergronden

Kleuren en achtergronden naar rechts en 1cm

Notitie: Verschillende secties van deze specificatie zijn bijgewerkt door andere specificaties. Alsjeblieft zie "Cascading Style Sheets (CSS) — De officiële definitie" in de nieuwste CSS Snapshot voor een lijst met specificaties en de afdelingen die ze vervangen.

CSS eigenschappen laten auteurs naar de voorgrond kleur en achtergrond van een element te specificeren. Achtergronden kunnen kleuren of afbeeldingen. Achtergrond eigenschappen laten auteurs om een ​​achtergrondafbeelding te positioneren, herhalen, en verklaart of zij dient te worden vastgesteld met betrekking tot de viewport of gescrold samen met het document.

Zie de paragraaf over kleur units voor de syntaxis van geldige kleurwaarden.


14.1 voorgrond kleur. de ‘color’ eigenschap

afhankelijk van user agent

Deze eigenschap beschrijft de voorgrond kleur van de tekst inhoud van een element. Er zijn verschillende manieren om rood te specificeren:

14.2 De achtergrond

Auteurs kunnen de achtergrond van een element (dat wil zeggen het rendering oppervlak) als ofwel een kleur of een afbeelding opgeven. In termen van de box model. "achtergrond" verwijst naar de achtergrond van de inhoud. padding en grensgebieden. Grens kleuren en stijlen worden ingesteld met de grens eigenschappen. De marges zijn altijd transparant.

Achtergrond eigenschappen worden niet geërfd, maar achtergrond de ouder box zal schitteren door standaard als gevolg van de initiële ‘transparante’ waarde ‘background-color’.

De achtergrond van de root element wordt de achtergrond van het doek en beslaat de gehele doek. verankerd (voor ‘background-position’) op hetzelfde punt als het zou zijn als het alleen werd geschilderd voor het root element zelf. Het root element niet opnieuw te schilderen deze achtergrond.

Voor HTML-documenten, echter, raden we aan dat auteurs geeft u de achtergrond voor de BODY element in plaats van de HTML-element. Voor documenten waarvan de wortel element is een HTML "HTML" element of een XHTML "html" element dat de waarden van de ‘transparante’ heeft berekend voor ‘background-color’ en ‘geen’ voor ‘background-image’. user agents moeten gebruiken in plaats van de berekende waarde van de achtergrond eigenschappen van de eerste HTML-code van dat element "LICHAAM" element of XHTML "lichaam" element kind bij het schilderen achtergronden voor het doek, en mag niet verf een achtergrond voor dat kind element. Dergelijke achtergronden moet worden verankerd op hetzelfde punt als ze zouden zijn als ze werden geschilderd alleen het hoofdelement.

Volgens deze regels, zal het doek ten grondslag liggen aan de volgende HTML-document een hebben "marmeren" achtergrond:

Merk op dat de regel voor de BODY element zal werken, zelfs al is de BODY tag is weggelaten in de HTML-bron, omdat de HTML-parser de ontbrekende tag zal afleiden.

Achtergronden elementen die een stacking context (zie ‘z-index eigenschap) vormen zijn geschilderd onderaan stacking context van het element, hierna iets dat stacking context.

14.2.1 Achtergrond eigenschappen. ‘Achtergrond kleur’. ‘achtergrond afbeelding’. ‘achtergrond herhaling’. ‘Background-attachment’. ‘Background-position’. en ‘achtergrond’

absolute URI of geen

Deze eigenschap stelt de achtergrond afbeelding van een element. Wanneer een achtergrondafbeelding instellen, moeten de auteurs ook aangeven een achtergrondkleur die zal worden gebruikt wanneer de afbeelding niet beschikbaar is. Wanneer het beeld, wordt deze weergegeven op de top van de achtergrondkleur. (Dus de kleur zichtbaar in de transparante delen van het beeld).

Waarden voor deze eigenschap zijn ofwel lt; URIgt ;. om het beeld, of ‘none’ te geven, wanneer er geen beeld wordt gebruikt.

Intrinsieke afmetingen uitgedrukt als percentages moeten worden opgelost met betrekking tot de afmetingen van de rechthoek die het coördinatensysteem wordt voor de “background-position ‘eigenschap.

Als de afbeelding een van hetzij een intrinsieke breedte of een intrinsieke hoogte en een intrinsieke aspectverhouding dan de ontbrekende dimensie wordt berekend uit de gegeven dimensie en de verhouding.

Als de afbeelding een van hetzij een intrinsieke breedte of hoogte en een intrinsieke geen intrinsieke aspectverhouding dan de ontbrekende dimensie aangenomen dat de grootte van de rechthoek die het coördinatensysteem wordt voor de “background-position ‘eigendom.

Als de afbeelding geen intrinsieke afmetingen en een intrinsieke verhouding afmetingen allicht de grootste dimensies die zodanige verhouding dat noch afmeting overschrijdt de afmetingen van de rechthoek die het coördinatensysteem wordt voor de “background-position ‘eigendom.

Als het beeld heeft geen intrinsieke verhouding ook niet, dan is de afmetingen moet worden aangenomen dat de rechthoek die de coördinaten systeem wordt voor de ‘background-position’ eigenschap zijn.

herhalen | herhaal-x | herhaal-y | no-repeat | erven

Als een achtergrondafbeelding is opgegeven, deze eigenschap bepaalt of het beeld wordt herhaald (tegel), en hoe. Alle tegels heeft betrekking op de inhoud. padding en grensgebieden van een doos.

De tegels en positionering van de achtergrond-afbeelding op inline elementen gedefinieerd in deze beschrijving. Een toekomstige niveau van CSS kan de tegels en positionering van de background-image te bepalen op inline elementen.

Waarden hebben de volgende betekenissen:

herhaling De afbeelding wordt zowel horizontaal als verticaal herhaald. herhaal-x Het beeld wordt alleen horizontaal herhaald. herhaal-y Het beeld wordt alleen verticaal herhaald. no-repeat De afbeelding wordt niet herhaald: slechts één kopie van het beeld wordt getrokken.

Eén exemplaar van de achtergrond is gecentreerd, en andere exemplaren erboven en eronder te maken aan een verticale band achter het element te maken.

Wordt een beeld van de achtergrond is aangegeven, eigenschap geeft aan of het is bevestigd met betrekking tot de viewport ( ‘vaste’), of rollen, samen met het bevattende blok ( ‘scroll’).

Merk op dat er slechts één kijkvenster per view. Als een element heeft een scrolling mechanisme (zie ‘overflow’), is een ‘vaste’ achtergrond niet bewegen met het element, en een ‘bladert u’ achtergrond beweegt niet met de scrolling mechanisme.

Zelfs wanneer de afbeelding wordt gefixeerd, blijft alleen toegankelijk wanneer het in de inhoud, opvulling of grensgebied van het element. Zo, tenzij de afbeelding is betegeld ( ‘background-repeat: repeat’), kan onzichtbaar zijn.

In wisselbaar medium, waar geen kijkvenster wordt een “vaste” achtergrond gefixeerd ten opzichte van de paginavak en derhalve gerepliceerd op elke pagina.

Dit voorbeeld maakt een oneindige verticale band die blijft "gelijmd" de viewport wanneer het element wordt geschoven.

User agents die niet ondersteunen ‘vaste’ achtergronden (bijvoorbeeld als gevolg van beperkingen van de hardware-platform) moeten de verklaringen met het trefwoord ‘vaste’ te negeren. Bijvoorbeeld:

Zie de paragraaf over de overeenstemming voor details.

verwijzen naar de grootte van de doos zelf

voor lt; lengthgt; de absolute waarde, anders wordt een percentage

Wordt een beeld van achtergrond is aangegeven, eigenschap geeft de uitgangspositie. Als er slechts één waarde wordt opgegeven, wordt de tweede waarde aangenomen dat ‘centrum’ te zijn. Indien ten minste één waarde geen sleutelwoord dan de eerste waarde geeft de horizontale positie en de tweede is de verticale stand. Negatief lt; percentagegt; en lt; lengthgt; waarden toegestaan. lt; percentagegt; Een percentage X lijnt de punt X% over (voor horizontale) of omlaag (verticale) het beeld met het punt X% over (voor horizontale) of omlaag (verticale) het element padding doos. Bijvoorbeeld, met een waardepaar ‘0% 0%, de linkerbovenhoek van het beeld wordt uitgelijnd met de linkerbovenhoek van de opvulling box. Een waarde paar van ‘100% 100%’ plaatst de rechterbenedenhoek van het beeld in de rechter benedenhoek van de opvulling doos. Met een waarde paar ‘14% 84% ‘, het punt 14% over en 84% lager dan het beeld op het punt 14% over en 84% beneden de opvulling box te plaatsen. lt; lengthgt; Een lengte L lijnt de linkerbovenhoek van het beeld een afstand L rechts van (horizontale) of onder (verticale) de linkerbovenhoek van het element padding box. Bijvoorbeeld, met een waardepaar van ‘2cm 1 cm’, de linkerbovenhoek van het beeld geplaatst 2cm naar rechts en 1 cm onder de bovenste linkerhoek van de opvulling box. top Gelijk aan ‘0%’ voor de verticale positie. rechts Gelijk aan ‘100%’ voor de horizontale positie. bodem Gelijk aan ‘100%’ voor de verticale positie. links Gelijk aan ‘0%’ voor de horizontale positie. centrum Equivalent aan ‘50% ‘voor de horizontale positie als het niet anders gegeven of ‘50%’ voor de verticale positie als deze.

Echter, de positie ongedefinieerd CSS 2,1 als het beeld een intrinsieke verhouding, maar geen intrinsieke grootte.

De tegels en positionering van de achtergrond-afbeelding op inline elementen gedefinieerd in deze beschrijving. Een toekomstige niveau van CSS kan de tegels en positionering van de background-image te bepalen op inline elementen.

Als het beeld op de achtergrond binnen de viewport is vastgesteld (zie de ‘background-attachment’ eigenschap), het beeld wordt geplaatst ten opzichte van de viewport in plaats van het element padding doos. Bijvoorbeeld,

In het bovenstaande voorbeeld, wordt het beeld (single) geplaatst in de rechter benedenhoek van de viewport.

Bron: www.w3.org

Leave a comment

Your email address will not be published.


*


zeven − 2 =