Bakgrund Egenskaper för Cascading Style Sheets (CSS)

Bakgrund Egenskaper för Cascading Style Sheets (CSS) - dummies

Med CSS-format kan du använda bakgrund egenskaper till ett antal olika objekt på en webbsida, inklusive hela sidan, ett visst lager, ett bord, en tabellcell och jämn text.

Bakgrundsfärg: En bakgrundsfärg kan tillämpas på de flesta objekt på en sida, inklusive text, tabeller, tabellceller, lager och en sidans kropp med ett hexadecimalt värde. När du anger hexadecimal färg för vilken stil som helst, kom ihåg att lägga till nummersymbolen (#) före hex-värdet, som i # cc9900, för bästa resultat för webbläsarsvisning.

 p {bakgrundsfärg: # 33ff00;} 

bakgrundsbild: Du kan använda bilder, till exempel en bakgrundsfärg, till bakgrunden av många olika objekt på en webbsida, inklusive kroppen på en sida, tabeller, tabellceller och lager. Du kan styra hur bilden fliserar (upprepar) genom att använda repetitionsattributet.

 . mylayer {background-image: url (images / car. gif);} 

bakgrundsrepetition: Repetitionsattributet berättar en webbläsare hur bakgrundsbilden ska upprepas i det område den fyller på. Som standard, och om inte annat anges, kommer alla bakgrunder att kakelas vertikalt och horisontellt för att fylla hela bakgrundsutrymmet för den stilade taggen eller objektet.

 kropp {bakgrundsbild: url (bilder / zigzag. Gif); Repeat-x;} 

Upprepa attributet har fyra variabler:

  • repeat: Detta alternativ är detsamma som standardinställningen för bakgrundsbilder och plattor bakgrundsbilden både horisontellt och vertikalt.

  • repeat-x: Använd det här alternativet när du vill att bakgrundsbilden ska plattas längs den horisontella axeln. Om så önskas, använd den i samband med attributet horisontellt och / eller vertikalt bakgrundsposition.

  • repeat-y: Använd det här alternativet när du vill att bakgrundsbilden ska plattas längs den vertikala axeln. Om så önskas, använd den i samband med attributet horisontellt och / eller vertikalt bakgrundsposition.

  • no-repeat: Den här inställningen visar bakgrundsbilden som en enda statisk bild utan att upprepas i båda riktningarna.

Bakgrundsbevakning: Detta attribut hänvisar till hur bakgrundsbilden interagerar med innehållet ovanför den. Bakgrundsbilden kan fungera på tre olika sätt - bläddra, fixa och ärva - men inte alla tre stöds konsekvent av alla webbläsare, så var noga med att testa vilket alternativ du väljer i en mängd olika webbläsare och webbläsarversioner på både Mac och PC plattformar.

 kropp {bakgrundsbild: url (bilder / biodiesel.gif); bakgrundsbeslut: fast; bakgrundsrepetition: repetera-y;} 

Här är en förklaring av de olika bakgrundsfästningsstilarna:

  • bläddra: Det här är standardalternativet för hur bakgrundsbilden är kopplad till sidan, vilken fungerar likadant om attributet anges eller ospecificerat i CSS. Med detta alternativ rullar bakgrundsbilden tillsammans med text och andra objekt på sidan.

  • Fixed: Det fasta attributet håller bakgrundsbilden fast i webbläsarfönstret medan text och andra objekt på sidan bläddrar förbi den.

  • ärv: När du anger det här alternativet är bakgrundsbilden ärft vidhäftningsregeln, vare sig bläddra eller fixas, från dess förälderbehållare, som med en tabellcell i en tabell.

Bakgrundsposition (X): Ange det horisontella bakgrundsställningsattributet för att styra var i webbläsarfönstret bakgrundsbilden visas och upprepas. Välj vänster, mitten eller höger eller skriv något värde i px (pixlar), pc (picas), pt (poäng), tum (mm), mm (millimeter), cm (centimeter), em ), eller% (procent).

 p {bakgrundsbild: url (bilder / återvinna. Gif); bakgrundsrepetition: repetera-x; Bakgrundsposition: vänster;} 

Bakgrundsposition (Y): Ange attributet vertikalt bakgrundsställning för att styra var i webbläsarfönstret bakgrundsbilden visas och upprepas. Välj topp, mitt eller botten eller skriv något värde i px (pixlar), pc (picas), pt (poäng), i (tum), mm (millimeter), cm (centimeter), em (ems), ex ), eller% (procent).

 p {bakgrundsbild: url (bilder / gogreen. Png); bakgrundsrepetition: repetera-y; bakgrundsposition: center;} 

När både horisontella och vertikala bakgrundspositioner måste anges i CSS-listan, listar de dem åtskilda med ett mellanslag:

 p {bakgrundsbild: url (images / earthsafe. jpg ); bakgrundsrepetition: repetera-x; Bakgrundsposition: vänster centrum;} 

Den horisontella positionen går alltid före vertikal position när de två kombineras. Om denna order inte följs kan det hända att elementet inte blir korrekt, vilket leder till oväntade visningsproblem när de visas i olika webbläsare.