Ako urobiť pruhované pozadie s CSS

Obsah

• inštrukcia
• inštrukcia
• varovanie

Pomocou kódu CSS môžete vytvoriť pruhované pozadie webovej stránky bez použitia grafiky. Tento efekt využíva úrovne gradientu CSS s viacerými prerušeniami farieb, ako aj vlastnosť veľkosti pozadia, aby sa gradientový vektor opakoval na obrazovke. Najlepší spôsob, ako to dosiahnuť, je začať s pevnou farbou pozadia a vytvoriť jeden z priehľadných pruhov pre zvýraznenú farbu. Používatelia, ktorí navštívia vašu stránku pomocou starých internetových prehliadačov, uvidia plnú farbu.

inštrukcia

CSS umožňuje vytvárať pruhované pozadie pre celú webovú stránku bez použitia grafiky (Jack Hollingsworth / Photodisc / Getty Images)

inštrukcia

1. Otvorte súbor štýlov CSS v programe Poznámkový blok alebo v programe na úpravu kódu. Pridať toto pravidlo na koniec súboru:

   html {výška: 100%; }

   Toto pravidlo umožňuje vyplniť celé pozadie webovej stránky pomocou prechodového pruhu, ktorý vytvorí.

2. Nastavte farbu pozadia vašej stránky v "html {}", aby ste poskytli základnú farbu pre vaše pruhy a predvolené pre staré prehliadače:

   html {výška: 100%; farba pozadia: čierna; }

3. Pridajte nasledujúci kód do predvoleného "html {}" na vytvorenie horizontálneho efektu pruhu:

   
   

   pozadie: lineárny gradient (transparentný 50%, biely 50%);

   Vytvorí dve prestávky farieb, prvá bude priehľadná a druhá biela. Každé prerušenie farieb trvá 50% priestoru na obrazovke. Nastavte šírku prúžkov zmenou percentuálnych hodnôt.

4. Pridajte hodnotu nula k prvému prerušeniu farieb a oddeľte ju čiarkou:

   Pozadný obrázok: lineárny gradient (0, transparentný 50%, čierny 50%);

   Tým umiestnite pásy vertikálne, namiesto toho, aby ste ich umiestnili vodorovne.

5. Duplikujte vlastnosť background-image a jej hodnoty v novom riadku. Urobte to dvakrát, vytvorte tri riadky s rovnakým kódom. Pridajte predponu "-moz" k lineárnemu gradientu v jednom z duplicitných riadkov kódu. Pridajte predponu „-webkit“ do druhého duplikátu:

   pozadie: lineárny gradient (0, transparentný 50%, biely 50%); pozadie: -moz-lineárny gradient (0, transparentný 50%, biely 50%); pozadie-obrázok: -webk-lineárny gradient (0, transparentný 50%, biely 50%);

   
   

6. Obmedziť gradient na určité množstvo pixlov nastavením veľkosti pozadia v nasledujúcom riadku kódu CSS:

   veľkosť pozadia: 20px;

   Zmeňte počet pixlov veľkosti pozadia, aby ste zmenili veľkosť gradientu. Kvôli neustálemu opakovaniu gradientu šírky stránky bude každé opakovanie zodpovedať množine pruhov na obrazovke.

varovanie

• Niektoré staršie prehliadače nepodporujú gradienty CSS3. Ak chcete zobraziť pruhy pre všetky typy prehliadačov, použite podmienené komentáre na zahrnutie štýlu s opakujúcou sa tabuľkou.