Kako narediti črtasto ozadje s CSS

Vsebina

• Navodila
• Navodila
• Obvestilo

Z uporabo kode CSS lahko ustvarite črtasto ozadje za spletno stran brez uporabe grafike. Ta učinek uporablja stopnjo CSS gradienta z več barvnimi prekinitvami, kot tudi lastnost velikosti ozadja, da se vektor vektorja ponovi po zaslonu. Najboljši način za to je, da začnete s trdno barvo ozadja in naredite eno od vaših prozornih črt za označeno barvo. Uporabniki, ki obiščejo vašo stran s starimi internetnimi brskalniki, bodo videli solidno barvo.

Navodila

CSS vam omogoča ustvarjanje črtastega ozadja za celotno spletno stran brez uporabe grafike (Jack Hollingsworth / Photodisc / Getty Images)

Navodila

1. Odprite datoteko slogi CSS v programu Notepad ali v programu za urejanje kode. Dodajte to pravilo na konec datoteke:

   html {višina: 100%; }

   To pravilo omogoča zapolnitev celotnega ozadja spletne strani z gradientnim trakom, ki ga bo ustvaril.

2. Nastavite barvo ozadja za svojo stran v »html {}«, da zagotovite osnovno barvo vaših črt in privzeto za stare brskalnike:

   html {višina: 100%; barva ozadja: črna; }

3. Dodajte naslednjo kodo v privzeti »html {}«, da ustvarite učinek horizontalnega traku:

   ozadje-slika: linearno gradient (transparentno 50%, belo 50%);

   Ustvaril bo dva barvna odmora, pri čemer je prvi pregleden, drugi pa bel. Vsaka prekinitev barve traja 50% prostora za gradient na zaslonu. Širino trakov prilagodite s spremembo odstotnih vrednosti.

   
   

4. Prvemu barvnemu prelomu dodajte vrednost nič in jo ločite z vejico:

   Slika ozadja: linearno gradient (0, transparentno 50%, črno 50%);

   To bo vaše pasove postavilo navpično, namesto da jih postavite vodoravno.

5. Lastnost slike ozadja in njene vrednosti podvojite v novi vrstici. To naredite dvakrat, tako da ustvarite tri vrstice z isto kodo. Dodajte predpono "-moz" linearnemu gradientu v eni od podvojenih vrstic kode. Dodajte predpono "-webkit" v drugo podvojeno vrstico:

   ozadje-slika: linearno gradient (0, transparentno 50%, belo 50%); background-image: -moz-linearni gradient (0, transparentno 50%, belo 50%); background-image: -webkit-linear-gradient (0, transparentno 50%, belo 50%);

6. Omejite preliv na določeno število slikovnih pik, tako da v naslednji vrstici v kodi CSS nastavite velikost ozadja:

   velikost ozadja: 20 px;

   Spremenite število slikovnih pik velikosti ozadja, da spremenite velikost preliva. Zaradi stalnega ponavljanja gradienta širine strani bo vsako ponovitev ustrezalo nizu prog na zaslonu.

   
   

Obvestilo

• Nekateri starejši brskalniki ne podpirajo CSS3 gradientov. Če želite prikazati proge za vse vrste brskalnikov, uporabite pogojne komentarje, da vključite slogovno datoteko s ponavljajočo se grafikonom.