7 CSS-i taustaomadust veebikujunduse elavdamiseks

Teie veebisaidi taustateema võib oluliselt mõjutada selle välimust ja tunnet. Värvid, pildid ja taustamustrid tekitavad emotsioone ja loovad suurepäraseid kasutuskogemusi.

HTML-i elementide taustastiili määramiseks saate kasutada CSS-i taustaatribuute. Lugege kõike mõne CSS-i atribuudi kohta, mida saate suurepärase tausta loomiseks kasutada.

1. taustavärv

The taustavärvi omadus määrab elemendi tausta värvi. Saate määrata värvi, kasutades nimetust "punane", HEX väärtust nagu "#00FF00" või RGB väärtust, nagu "rgb (0, 255, 0)". HSL-i väärtust saate kasutada ka taustavärvi määramiseks tooni, küllastuse ja heleduse abil.

Järgmises näites määratakse kogu lehe taustavärv oranžiks. Iga pealkirja elemendid saavad erineva tausta.

<keha>
<h2>Ma olen Rohelineh2>
<h3>Ma olen Punaneh3>
<h4>Olen Sinineh4>
keha>

CSS-i abil saate igale elemendile rakendada ainulaadse taustavärvi:

keha {
taustavärv: oranž;
}
h2 {
taustavärv: #006600;
}
h3 {
taustavärv: rgb(128, 0, 0);
}
h4{
taustavärv: hsl(240, 100%, 50%);
}

See muudab lehe stiiliks:

Läbipaistmatuse omadust saate kasutada elemendi läbipaistvuse määramiseks. Läbipaistmatuse väärtused jäävad vahemikku 0,0–1,0. Mida väiksem väärtus, seda läbipaistvam element on.

Näiteks proovige kehaelemendi läbipaistmatuseks määrata 0,5:

keha {
taustavärv:oranž;
läbipaistmatus:0.5;
}

See kuvatakse järgmiselt – võrrelge värve eelmise ekraanipildi värvidega:

2. taustapilt

Atribuut background-image määrab pildi elemendi taustaks. Võite viidata kohalikule või Internetist pärit pildile.

<keha>
 <h1>Tereseal!h1>
 <lk>Ionanpiltsisseminutaustal!lk>
keha>

CSS-fail:

keha {
taustapilt:url("https://pilte.pexels.com/fotod/1191710/pexels-foto-1191710.jpeg?auto=suruma kokku&cs=tinysrgb&w=1260&h=750&dpr=1");
}

See kuvatakse järgmiselt:

Võite ka kasutada tausta gradiendid et luua oma rakendusele ainulaadne välimus.

3. taustakordus

Taustapildi atribuut kordab vaikimisi pilte. Saate valida, kas pilti korrata horisontaalselt x-teljel või vertikaalselt y-teljel.

Teise võimalusena, kui kordus ei sobi teie stiiliga, saate selle väärtuse abil eemaldada ei-korda.

<keha>
<h1>Tere!h1>
<h3>Demonstreerin x-teljel korduse tausta-korduse omadust!h3>
keha>

Kasutage x-teljele korduva tausta rakendamiseks järgmist CSS-i:

keha {
taustapilt: url("https://pilte.pexels.com/fotod/459335/pexels-foto-459335.jpeg?auto=suruma kokku&cs=tinysrgb&w=1260&h=750&dpr=1");
taustakordus: korda-x;
}

Tulemus:

Järgmisena proovige korrata pilti y-teljel:

keha {
taustapilt:url("https://cdn.pixabay.com/foto/2016/04/18/22/05/merekarbid-1337565__340.jpg");
taustakordus:repeat-y;
}

Tulemus:

Näide y-teljel tundub kindlasti moonutatud. Kui need ei ole need mustrid, mida otsite, saate täpsustada ei-korda selle asemel:

keha {
taustapilt:url("https://pilte.pexels.com/fotod/259915/pexels-foto-259915.jpeg?auto=suruma kokku&cs=tinysrgb&w=600");
taustakordus:ei-korda;
}

Tulemus:

4. tausta-positsioon

Tausta asukoha atribuut määrab taustapildi asukoha selle elemendis. See kasutab positsioonipõhiseid märksõnu nagu Keskus, ülemine, ja põhjavõi piksli- või protsendiväärtus.

Lisage viimasele pildile taustapositsiooni omadus:

keha {
taustapilt: url("https://pilte.pexels.com/fotod/259915/pexels-foto-259915.jpeg?auto=suruma kokku&cs=tinysrgb&w=600");
tausta-positsioon: ülevalKeskus;
}

See näeb välja selline:

Näete, et pilt moonutab veebisaidi välimust. Parandame selle järgmise varaga.

5. tausta suurus

Taustpildi atribuuti saate kasutada pildi konkreetse suuruse määramiseks. See kasutab selliseid märksõnu nagu kaas ja sisaldama või piksli- või protsendiväärtus. Parandame moonutatud taustpildi, lisades tausta suuruse omaduse.

keha {
 taustapilt: url(" https://images.pexels.com/photos/259915/pexels-photo-259915.jpeg? auto=compress&cs=tinysrgb&w=600");
 background-repeat: no-repeat;
 tausta-positsioon: keskel;

Tulemus näitab, et pilt katab nüüd veebilehte proportsionaalselt.

6. tausta-manus

Taustamanuse atribuut määrab, kas taustapildi asukoht jääb fikseerituks või kerib. Võite kasutada märksõnu fikseeritud või kerida.

Näitame seda järgmises koodis:

<keha>
<h1>Taustamanuse atribuuth1>
<lk>Fikseeritud manuse atribuudiga märkate, et taust ei liigu koos tekstiga.lk>
<lk>Fikseeritud manuse atribuudiga märkate, et taust ei liigu koos tekstiga.lk>
<lk>Fikseeritud manuse atribuudiga märkate, et taust ei liigu koos tekstiga.lk>
<lk>Fikseeritud manuse atribuudiga märkate, et taust ei liigu koos tekstiga.lk>
<lk>Fikseeritud manuse atribuudiga märkate, et taust ei liigu koos tekstiga.lk>
<lk>Fikseeritud manuse atribuudiga märkate, et taust ei liigu koos tekstiga.lk>
<lk>Fikseeritud manuse atribuudiga märkate, et taust ei liigu koos tekstiga.lk>
<lk>Fikseeritud manuse atribuudiga märkate, et taust ei liigu koos tekstiga.lk>
<lk>Fikseeritud manuse atribuudiga märkate, et taust ei liigu koos tekstiga.lk>
<lk>Fikseeritud manuse atribuudiga märkate, et taust ei liigu koos tekstiga.lk>
<lk>Fikseeritud manuse atribuudiga märkate, et taust ei liigu koos tekstiga.lk>
<lk>Fikseeritud manuse atribuudiga märkate, et taust ei liigu koos tekstiga.lk>
keha>

CSS-fail:

keha {
taustapilt: url("https://pilte.pexels.com/fotod/96627/pexels-foto-96627.jpeg?auto=suruma kokku&cs=tinysrgb&w=600");
taustakordus: ei-korda;
tausta-positsioon: Keskus;
tausta suurus: kaas;
tausta-manus: fikseeritud;
}

Kui liigute lehel allapoole, märkate, et taust ei liigu:

Keritava taustamanuse atribuudi demonstreerimiseks muutke märksõnaks kerige. Märkad, et nüüd liigub taust koos tekstiga.

keha {
taustapilt: url("https://pilte.pexels.com/fotod/96627/pexels-foto-96627.jpeg?auto=suruma kokku&cs=tinysrgb&w=600");
taustakordus: ei-korda;
tausta-positsioon: Keskus;
tausta suurus: kaas;
tausta-manus: kerige;
}

7. Tausta kiirkirja omadus

Võite märgata, et ideaalse tausta saamiseks peate lisama mitu atribuuti. See hõlmab palju koodi kirjutamist. Kuid saate koodi lühendada, kasutades tausta stenogrammi atribuuti.

Lühike atribuut võimaldab teil ühele reale määrata palju tausta atribuute. Kasutate märksõna taustal kiirkirja omaduse määramiseks.

Näiteks selle koodi kirjutamise asemel:

keha {
taustavärv: roheline;
taustapilt: url("sülearvuti 3.jpg");
taustakordus: ei-korda;
tausta suurus: kaas;
tausta-manuse: kerige;
tausta-positsioon: Keskus;
}

Saate selle kirjutada ühele reale, näiteks järgmiselt:

keha {
taustal: rohelineurl("sülearvuti 3.jpg") ei-kordakaaskerigeKeskus;
}

Kiirkirja omadus järgib kindlat järjekorda. Peate atribuudid selles järjekorras joodama, isegi kui üks või mitu on puudu. Järjekord on järgmine:

• taustavärv
• taustapilt
• taustakordus
• tausta-manus
• tausta-positsioon

CSS-iga saate luua huvitavaid kujundusi, kasutades erinevaid taustamustrid. Nende mustrite abil saate saavutada oma veebisaidile ainulaadse ja silmapaistva tausta.

Muud CSS-i taustaomadused

CSS on võimas ja saate sellega palju ära teha, et oma rakendust vürtsitada. Animatsiooni lisamiseks saate kasutada atribuute, nagu taustaklipp, tausta päritolu ja tausta segamise režiim.

Samuti saate oma lehtede kohandamiseks kasutada gradiente ja mustreid. Katsetage CSS-i taustaomadustega, et täiustada oma veebidisaini oskusi.