CSS bakgrunds öppenhet. Genomskinlig bakgrund eller text med CSS

Med tillkomsten av webbdesigners CSS3 arbetar på många sätt har blivit enklare och mer logisk: trots allt, kan du nu verkligen flexibelt anpassa något föremål, mindre ofta tillgripa JavaScript. Låt oss säga att du behöver justera insyn i bakgrunden - CSS erbjuder omedelbart flera alternativ.

Bakgrund som definieras av en uppsättning attribut (bakgrund-image, bakgrund-ställning , bakgrund-storlek, bakgrund-upprepa, bakgrund-fäst, bakgrund-ursprung, bakgrund-clip, background-color), vilka var och en kan tilldelas separat eller kombinerade till attributet bakgrund. Låt oss undersöka var och en av dem i detalj.

Attribut bakgrundsfärg

I CSS, bakgrundsfärgen kan ställas in på flera sätt: genom att använda en hex 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 registreras i fastigheten efter gallret: bakgrundsfärg: # FFDAB9. Om tecken i denna post är samma par, är koden oftast lite cut: # ccff00 kan skrivas som # cf0:

body {background-color: # CF0 ;}.

Namnet är, även i de mest exotiska färger. Till exempel, förutom standard röda och vita kan du använda NavajoWhite (#FFDEAD) eller Honeydew2 (# E0EEE0):

body {bakgrundsfärg: lila; }.

Det senare alternativet är RGB eller RGBA posten kan du ange inte bara färg, utan också insynen i CSS bakgrunden, men metoden fungerar bara i IE-versioner som är äldre än nio. Andra webbläsare erkänner normal version med öppenhet. Enligt W3C-standarder är det att föredra att använda fortfarande RGBA istället för den mer vanliga RGB.

Det sista värdet i RGBA bakgrund och sätter opaciteten från 0 (transparent) till en (ogenomskinlig).

Det finns några ovanliga värden. Bakgrundsfärgen kan ställas in med hjälp av HRT och HSLA. Båda sattes till CSS3, och därför inte stöds av IE version 9 eller högre. Utföringsformer identiska RGB eller RGBA, endast i ett annat format: Hue (nyans - värde på färghjulet, ges i grader), Mätta (mättnad - färgintensiteten som en procentsats, från 0 till 100), Lightness (ljushet - ljushet, mätt på liknande sätt parameter Mätta ).

Attribut background-image

Den mest olika webbläsare version av transparent bakgrund - detta är användningen av bilden. I CSS3, kan du ställa in ännu fler bilder, görs detta genom ett kommatecken. exempel:

{Background-kroppen bilden: url (bg1.png), url (bg2.png)}.

Detta sätt att stödja även IE8. Flera bilder i bakgrunden av gummi som används i layouten. Viktigt, glöm inte att använda bilder och ställ in bakgrundsfärg i CSS, eftersom användarna enkelt kan ladda upp en bild.

Attribut bakgrund-positionen

Om du använder bilden för att ställa in bakgrundsenheten låter CSS du placera bilden någonstans på skärmen. Som standard är bilden i det övre vänstra hörnet. Attribut tar antingen muntliga instruktioner (topp, botten, vänster, höger), en numerisk (ränta, pixlar och andra enheter). I det här fallet måste du ange två värden, horisontella och vertikala:

body {background-positioner: högra centrum ;} - i det här exemplet, kommer mönstret att vara placerad på den högra sidan av sidan, toppen och botten av bilden avståndet till detsamma.

Attribut bakgrundsstorlek

Ibland är det nödvändigt att sträcka CSS bakgrunden eller minska dess storlek. För att göra detta, använd attributbakgrunds storlek, och storleken på bakgrunden kan ställas in i bildpunkter eller i procent, och alla andra enheter.

Med detta attribut, det finns vissa problem: för korrekt visning av en bakgrund i de tidigare versionerna av webbläsaren prefix som ska användas. Naturligtvis den nuvarande versionen stöder till fullo detta attribut och behovet av specifika egenskaper försvann.

Attribut bakgrunds fastsättning

Detta attribut anger beteendet hos bakgrundsbilder medan du bläddrar. Så kan det ta 3 värden (exklusive ärva, summan för alla attribut som diskuteras i den här artikeln):

• fast - gör bilden på bakgrunden av fast;
• bläddra - bakgrunds rullar med resten av elementen;
• lokal - bilden på bakgrunden rullas om rullning har innehåll. Bakgrund som går utöver innehållet i ramen är fast.

Exempel på användning:

body {background-fastsättning fixeras}.

För närvarande har Firefox stöder inte den sista egenskapen (lokal).

Attribut bakgrunds ursprung

Detta attribut är ansvarig för positioneringselementet. Tidiga webbläsare kräver användning av prefix. Egenskapen själv har tre parametrar:

• padding-boxen är placerad i förhållande till kantmönster, samtidigt som man tar hänsyn till tjockleken av ramen;
• border-box egenskaper som skiljer sig från den föregående i att gränslinjen kan vara helt eller delvis överlappar det mönster;
• content-box positioneringsbild pryavyazyvaya dess innehåll.

Om du anger flera värden, då webbläsare kan reagera på sitt eget sätt: Firefox och Opera uppfatta endast det första alternativet.

Attribut background-repeat

Som regel, om bakgrundsbilden anges, det måste upprepas horisontellt eller vertikalt. För detta och använde attributbackground-repeat. Sålunda blockera bakgrund, kan CSS, som innehåller en sådan egenskap har ett av flera parametrar:

• no-repeat - bilden visas på en sida i en enda version;
• upprepa - bakgrund upprepas i x- och y;
• upprepa-x - bara horisontellt;
• upprepa-y - bara vertikalt;
• rymden - bakgrunden upprepas, men om utrymmet är omöjligt att fylla i mellan bilderna visas tom;
• runt - bilden skalas, om den inte fyller hela området av hela bilder.

Exempel på attributen:

body {background-repeat: nr- upprepa upprepa} - liknande bakgrund-repeat: upprepa-y.

I CSS3 kan ange värden för flera bilder när notering parametrar, separerade med kommatecken.

Attribut bakgrunds klipp

Detta attribut definierar beteendet av bakgrunden under gränser (t ex i fallet med de streckade ramar):

• stoppning-box - bakgrund visas i det inre av blocket;
• border-box - bilden kommer inom ramen;
• content-box - bilden i bakgrunden visas bara i innehållet.

Exempel på användning:

body {background-clip: innehålls box;}.

Krom och Safari kräver -webkit- prefix.

Opacitet attribut och filtret

opacitet attribut gör det möjligt att ställa in insyn i bakgrunden - CSS egendom kommer att fungera i alla webbläsare. Värdet sätts i intervallet 0,0-1,0 inkluderande. I det här fallet kan du ställa in insyn i CSS bakgrunden ingen heltal 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;}.

För att ställa in bakgrunds opacitet, är CSS lämplig även för IE under den nionde versionen använda filtret attribut:

.block {background-image: url ( img.png); filter: alfa (opacitet = 30)}.

I detta fall är opacitetsvärdet in mellan 0 och 100. Notera att opaciteten tillskriver olika inställningar öppenhet via RGBA arv: vid användning av opacitet blir tydlig inte bara bakgrunden, men också alla element inuti enheten.

övervaka alltid din användningsstatistik för OSS webbläsare och alla andra länder. Det största problemet med alla DTP - äldre versioner av IE, de inte tillåta dig att använda den fulla omfattningen CSS3. I layout glöm inte att använda specialtjänster som kontrollerar om din webbläsare stöder alla CSS egendom. Om du inte kan installera äldre versioner av webbläsare, hitta en tjänst som kommer att kontrollera webbplatsens arbete i flera webbläsare på nätet.