Med tillkomsten av CSS3 DTP arbete på många sätt har blivit enklare och mer logisk: trots allt, kan du nu göra för att flexibelt konfigurera ett objekt, mer sällan tillgripa JavaScript.Låt oss säga att du behöver justera insyn i bakgrunden - CSS erbjuder omedelbart flera alternativ.
bakgrund definieras av en uppsättning attribut (background-image, bakgrund lägen, bakgrund storlek, bakgrunds upprepa, bakgrundsfäst, bakgrunds ursprung, bakgrund, klipp, bakgrundsfärg), som var och en kan föreskrivas ensamt elleratt förena under samma attribut bakgrunden.Låt oss undersöka var och en av dessa mer i detalj.
attribut bakgrundsfärg
I CSS, kan bakgrundsfärgen sättas på flera sätt: med hjälp av hexadecimal kod, färgnamn eller RGB-posten.I CSS3 blev det möjligt att använda i stället för RGB-inspelningsalternativ med RGBA.
hex färgkod är skriven i fastigheten efter gallret: background-color: # FFDAB9.Om tecknen i par matchar ett sådant register, är koden oftast lite klipp: # ccff00 kan skrivas som # CF0:
body {background-color: # CF0;}.
namn där, även i de mest exotiska färger.Till exempel, förutom standard rött och vitt, kan du använda NavajoWhite (#FFDEAD) eller Honeydew2 (# E0EEE0):
body {background-color: lila;}.
sista alternativet RGB eller RGBA post kan du ange inte bara färg, utan också insynen i bakgrunden CSS, men sättet att arbeta i IE 9 endast äldre versioner.Andra webbläsare erkänner normal variant med insyn.Enligt de W3C-standarder är det föredraget att använda alla samma RGBA stället för det mer vanliga RGB.
sista värdet på RGBA sätter opaciteten av bakgrunden och från 0 (genomskinlig) till 1 (ogenomskinlig).
Det finns några ovanliga värden.Bakgrundsfärgen kan anges med HRT och HSLA.Båda tillsattes i CSS3, och därför inte stöds av IE version 9 eller senare.Alternativen är identiska med RGB eller RGBA, bara i ett annat format: Hue (färgton - värdet på färghjulet, ges i grader), Mätta (mättnad - färgintensiteten i procent, från 0 till 100), Lightness (ljushet - ljusstyrka, mätt på samma sätt parametern Mätta).
attribut background-image
mest olika webbläsare version av en genomskinlig bakgrund - är användningen av bilden.I CSS3, kan du ange ännu fler bilder, görs detta genom ett kommatecken.Exempel:
body {background-image: url (bg1.png), url (bg2.png)}.
stöder denna även IE8.Flera bilder som bakgrund som används i layouten av gummi.Viktigt, glöm inte att använda bilder som anges i CSS bakgrundsfärg, eftersom användare enkelt kan ladda upp en bild.
attribut bakgrund position
Om du använder en bild för att definiera bakgrundsblocket, kan CSS du placera bilden någonstans på skärmen.Som standard är den bild som finns i det övre vänstra hörnet.Attribut acceptera några verbala riktningar (uppåt, nedåt, vänster, höger), eller numerisk (räntor, pixlar och andra enheter).Det är nödvändigt att specificera de två värdena för horisontell och vertikal:
body {background-ställning: rätt center;} - i det här exemplet, kommer bakgrunden vara placerad till höger på sidan, med toppen och botten av avståndet till bilden är densamma.
attribut bakgrund storlek
Ibland måste du använda CSS för att sträcka bakgrunden eller minska dess storlek.För detta ändamål kan attributet bakgrund-storlek, och storleken definieras som bakgrundspixlar eller procentandel, eller i någon annan måttenhet.
Med detta attribut, det finns vissa problem: för korrekt visning av en bakgrund i äldre webbläsare måste du använda ett prefix.Naturligtvis, de aktuella versionerna stöder till fullo detta attribut och behovet av särskilda egenskaper försvann.
attribut bakgrund-fäste
Detta attribut anger beteendet hos bakgrundsbilden när du bläddrar.Till exempel kan det ta 3 värden (exklusive ärva, för summan av alla attribut i den här artikeln):
- fast - gör bilden på bakgrunden av fast;
- rulla - bakgrunds rullar med resten av elementen;
- lokala - bilden på bakgrunden rullas om rullning är innehåll.Bakgrund, som går utöver innehållet är fast.
Exempel på användning:
body {background-fäste fast}.
närvarande Firefox stöder inte den senaste egendom (lokal).
attribut bakgrund-ursprung
Detta attribut är ansvarigt för positionering av elementet.Webbläsare tidigare versioner kräver användning av prefix.Egenskapen själv har tre parametrar:
- stoppning-box positioner från kanten av bakgrunden, samtidigt som man tar hänsyn till tjockleken av ramen;
- gräns låda egenskaper som skiljer sig från den föregående i att gränslinjen kan vara helt eller delvis täcka bakgrunden;
- innehålls låda positionering bild pryavyazyvaya dess innehåll.
Om du anger flera värden, kan webbläsaren reagera på sitt eget sätt: Firefox och Opera accepterar endast det första alternativet.
attribut background-upprepa
Som regel om bakgrundsbilden anges, måste det upprepas horisontellt eller vertikalt.För detta och attributet background-repeat.Således, blockera bakgrund, kan CSS som innehåller sådan egenskap har ett av flera alternativ:
- no-repeat - bild visas på sidan i en enda form;
- upprepnings - mönster upprepas i x och y;
- repeat-x - bara horisontellt;
- upprepad y - bara vertikalt;
- rymd - mönster upprepas, men om utrymmet fylls inte, så finns det tomrum mellan bilder;
- runda - skalas bilden, om den inte fyller hela området hela bilden.
Exempel på attribut:
body {background-repeat: no-repeat repeat} - liknande bakgrund-repeat: upprepa-y.
I CSS3 kan ange värden för flera bilder om överföringsparametrarna separeras med kommatecken.
attribut bakgrund-klipp
Detta attribut specificerar beteendet hos bakgrunden under gränser (till exempel i fallet med de streckade ramar):
- stoppning-box - bakgrund visas i det inre av blocket;
- gräns box - kommer inom ramen för bilden;
- innehålls låda - bilden på bakgrunden uppträder endast inom innehållet.
Exempel på användning:
body {background-klipp: innehålls box;}.
Chrom och Safari kräver användning av prefixet -webkit-.
opacitet attribut och filter
opacitet attribut kan du ställa in bakgrunden öppenhet - CSS-egenskapen kommer att fungera i alla webbläsare.Värdet är inställbart 0,0-1,0 inkluderande.Med detta kan du ställa in insyn i bakgrunden CSS utan ett heltal värde i stället för 0,3 är tillräckligt för att skriva 0,3:
.block {background-image: url (img.png);opacitet: 0,3;}.
att ställa in bakgrunden insyn, är CSS lämplig även för IE under nionde versionen, använd attributet filter:
.block {background-image: url (img.png);filter: alpha (opacitet = 30);}.
I det här fallet är opaciteten inställd mellan 0 och 100. Notera att opaciteten skriver olika inställningar öppenhet via RGBA ärftlighet: opacitet med hjälp av en genomskinlig bakgrund är inte bara, utan också alla objekt i enheten.
Se alltid till webbläsare användningsstatistik i OSS och alla andra länder.Det största problemet med alla DTP - äldre versioner av IE, de inte tillåter full användning av CSS3.Om layouten glöm inte att använda specialtjänster som kontrollerar om din webbläsare är en egenskap CSS.Om du inte kan installera äldre versioner av webbläsare, får du tjänsten som kontrollerar driften av webbplatsen i olika webbläsare nätet.
