Met de komst van CSS3 DTP werk in vele opzichten is makkelijker en logischer geworden: immers, kunt u nu doen om een object flexibel te configureren, minder vaak hun toevlucht tot JavaScript.Laten we zeggen dat je nodig hebt om de transparantie van de achtergrond aan te passen - CSS biedt meteen verschillende opties.
achtergrond gedefinieerd door een set van attributen (background-image, background-position, achtergrond-size, background-repeat, background-attachment, background-afkomst, achtergrond-clip, background-color), die elk kunnen alleen worden voorgeschreven ofom zich te verenigen onder hetzelfde attribuut achtergrond.Laten we elk van deze onderzoeken in meer detail.
attribuut background-color
In CSS, kan de achtergrondkleur worden ingesteld op verschillende manieren: met behulp van de hexadecimale code, kleur naam of RGB-entry.In CSS3 werd het mogelijk om te gebruiken in plaats van RGB-opname-optie met RGBA.
hex kleurcode is geschreven in het pand na de rooster: background-color: # FFDAB9.Als de tekens in paren overeenkomen zo'n record, de code is meestal een beetje cut: # ccff00 geschreven kan worden als # CF0:
body {background-color: # CF0;}.
naam er, zelfs in de meest exotische kleuren.
body {: paars background-color:;} bijvoorbeeld, in aanvulling op de standaard rood en wit, je kunt NavajoWhite (#FFDEAD) of Honeydew2 (# E0EEE0) te gebruiken.
laatste optie RGB of RGBA opnemen kunt u niet alleen de kleur, maar ook de transparantie van de achtergrond CSS, maar de manier om te werken in IE 9 alleen oudere versies opgeven.Andere browsers herkennen normale variant met transparantie.Volgens de W3C standaarden het de voorkeur om toch RGBA in plaats van de meer gebruikelijke RGB.
laatste waarde op de RGBA stelt de ondoorzichtigheid van de achtergrond en van 0 (transparant) tot 1 (ondoorzichtig).
Er zijn een aantal ongewone waarden.De achtergrondkleur kan worden opgegeven via de HSL en HSLA.Beiden werden toegevoegd CSS3 en derhalve niet door IE versie 9 of hoger.Opties zijn identiek aan RGB of RGBA, alleen in een ander formaat: Hue (tint - de waarde op het kleurenwiel, wordt gegeven in graden), verzadigd (verzadiging - kleurintensiteit als percentage, van 0 tot 100), Lightness (lichtheid - helderheid, op dezelfde wijze gemeten parameter Saturate).
attribuut background-image
meeste cross-browser versie van een transparante achtergrond - is het gebruik van de afbeelding.In CSS3, kunt u nog meer beelden opgeven, dit wordt gedaan door middel van een komma.Voorbeeld:
body {background-image: url (bg1.png), url (bg2.png)}.
ondersteunt dit zelfs IE8.Verscheidene beelden als achtergrond gebruikt voor de indeling van de rubber.Belangrijker is, vergeet dan niet om een afbeelding te gebruiken als in uw CSS achtergrondkleur, omdat de gebruikers gewoon een foto kunt uploaden.
attribuut background-position
Als u een afbeelding gebruiken om de achtergrond blok te definiëren, CSS kunt u het beeld overal op het scherm.Standaard wordt het beeld in de linkerbovenhoek.Attribuut accepteren verbale richtingen (boven, onder, links, rechts), of numerieke (rente, pixels en andere eenheden).Het is noodzakelijk de twee waarden voor horizontale en verticale specificeren:
body {background-: rechts center;} - in dit voorbeeld, wordt de achtergrond zich aan de rechterzijde van de pagina, de boven- en onderkant van de afstand tot het beeld hetzelfde.
attribuut achtergrond-size
Soms moet je CSS gebruiken om de achtergrond te rekken of de omvang ervan te verminderen.Hiertoe kan de eigenschap achtergrond-formaat, en de grootte wordt gedefinieerd als achtergrond pixels of percentage of op andere meeteenheid.
Met deze eigenschap, zijn er enkele problemen: voor een correcte weergave van een achtergrond in oudere browsers moet u een voorvoegsel gebruiken.Natuurlijk, de huidige versies volledig dit kenmerk en de noodzaak van specifieke eigenschappen verdwenen ondersteunen.
attribuut background-attachment
Dit attribuut specificeert het gedrag van het beeld op de achtergrond bij het scrollen.Bijvoorbeeld, het kan 3 waarden te nemen (met uitzondering van erven, voor het totaal van alle attributen in dit artikel):
- vaste - maakt de foto op de achtergrond van de vaste;
- scroll - de achtergrond schuift met de rest van de elementen;
- lokale - het beeld op de achtergrond is geschoven als scrollen is content.Achtergrond, die verder gaat dan de inhoud is vastgesteld.
Voorbeeld:
body {background-attachment vast}.
Momenteel Firefox ondersteunt de nieuwste advertenties van woningen (lokaal).
attribuut achtergrond-oorsprong
Dit kenmerk is verantwoordelijk voor de positionering van het element.Browsers eerdere versies vereisen het gebruik van voorvoegsels.De woning zelf heeft drie parameters:
- padding-box posities van de rand van de achtergrond, rekening houdend met de dikte van het frame;
- border-box eigenschappen verschillend van de vorige doordat de grenslijn kan volledig zijn of gedeeltelijk betrekking hebben op de achtergrond;Beeldinhoud-box positionering
- pryavyazyvaya de inhoud ervan.
Als u meerdere waarden opgeeft, kan de browser reageren op hun eigen manier: Firefox en Opera accepteren alleen de eerste optie.
attribuut background-repeat
In de regel, als de achtergrond afbeelding wordt opgegeven, moet deze horizontaal of verticaal worden herhaald.Voor deze en gebruikt het kenmerk background-repeat.Zo blok achtergrond, CSS die een dergelijke eigenschap bevat, kan een van de verschillende opties hebben:
- no-repeat - afbeelding verschijnt op de pagina in een enkele vorm;
- herhaal - patroon herhaald in de x en y;
- repeat-x - alleen horizontaal;
- repeat-y - alleen verticaal;
- ruimte - patroon herhaalt, maar als de ruimte niet gevuld is, dan zijn er holtes tussen foto's;
- round - het beeld wordt geschaald, als het niet het hele gebied gehele beeld niet invult.
Voorbeeld van kenmerk:
body {background-repeat: no-repeat repeat} - op dezelfde background-repeat: repeat-y.
In CSS3 kunnen waarden voor meerdere beelden opgeven indien de overdracht parameters gescheiden door een komma.
attribuut achtergrond-clip
Met dit kenmerk wordt het gedrag van de achtergrond onder de grenzen (bijvoorbeeld in het geval van de gestippelde kaders):
- padding-box - achtergrond weergegeven in het inwendige van het blok;
- border-box - binnen de werkingssfeer van het beeld;
- content-box - het beeld op de achtergrond verschijnt alleen in de inhoud.
Voorbeeld:
body {background-clip: inhoud-box;}.
Chrom en Safari vereisen het gebruik van het voorvoegsel -webkit-.
ondoorzichtigheid attribuut en filteren
ondoorzichtigheid attribuut kunt u de achtergrond transparantie set - CSS-eigenschap zal werken in alle browsers.De waarde kan worden ingesteld 0,0-1,0 inclusive.Hiermee kunt u de transparantie van de achtergrond CSS stellen zonder een geheel getal in plaats van 0,3 is voldoende om 0,3 schrijven:
.block {background-image: url (img.png);ondoorzichtigheid: 0,3;}.
Om de achtergrond transparantie te stellen, CSS is ook geschikt voor IE onder de negende versie, gebruik het attribuut filter: background-image
.block {: url (img.png);filter: alpha (dekking = 30);}.
In dit geval, de dekking ligt tussen 0 en 100. Merk op dat de dekking toeschrijven verschillende transparantie-instellingen via RGBA erfelijkheid: dekking met een transparante achtergrond is niet alleen, maar ook alle items in het toestel.
Controleer altijd of de browser gebruik van statistieken van het GOS en alle andere landen.Het grootste probleem van alle DTP - oudere versies van IE, ze niet volledig gebruik van de CSS3 mogelijk te maken.Als de lay-out Vergeet niet om de speciale diensten die controleren of uw browser is een eigenschap CSS.Als je oudere versies van browsers niet kunt installeren, krijgt u de service die de werking van de site in verschillende browsers controleert online.
