Hoe om die agtergrondkleur in HTML te stel

Om die agtergrondkleur van `n webblad in HTML te stel, hoef jy net `n vinnige verandering in die liggaam van die kode te maak (element "liggaam"), binne die etikette. Die stappe kan wissel afhangende van die voorkoms wat u u fonds wil gee. Leer hoe om `n stewige kleur, `n beeld, `n kleurgradiënt of `n multi-kleur animasie vir die agtergrond van jou webblad te stel.

conținut

Stappe
Metode 1stel `n stewige kleur agtergrond
Metode 3stel `n agtergrond met gradiënt kleure
Metode 4stel `n agtergrond wat kleur verander

stappe

Metode 1
Stel `n stewige kleur agtergrond

Open die HTML-lêer met u voorkeur teksredakteur. Begin met HTML 5, die HTML-kenmerk is nie meer gebruik nie . Nou moet die agtergrondkleur, sowel as alle ander aspekte wat verband hou met die bladsystyl, deur CSS-kode ingestel word.

Voeg die etikette by jou dokument. Al die stylinligting van die bladsy (insluitende die agtergrondkleur) moet in daardie etikette ingesluit word. As u dokumente reeds die etikette het. Alles wat jy by die element voeg "liggaam" in CSS sal die hele bladsy beïnvloed.

 gebruik van die eiendom "agtergrond-kleur".

Voeg die etikette in die HTML-lêer. Alle stylinligting op die bladsy (insluitende die agtergrondkleur) moet binne hierdie etikette gekodeer word. As jy reeds hierdie etikette ingesluit het, beweeg net na daardie deel van die lêer.

. Alles wat jy byvoeg in die element "liggaam" in CSS sal die hele bladsy beïnvloed.

Voeg die eiendom by "agtergrond-beeld" na die element "liggaam". Wanneer u hierdie eiendom byvoeg, moet u die naam van die prentlêer insluit. Maak seker dat die lêer van die prent gestoor word in dieselfde gids as die HTML-lêer (anders moet u die volle pad van die lêer in die webbediener invul).

Dit sal ook `n goeie idee wees om die eiendom by te voeg "agtergrond-kleur", net as die agtergrond prent nie laai nie.

Dit is ook moontlik om verskeie lae beelde by te voeg. Jy kan verskeie beelde een bo-aan die ander stapel. Dit kan nuttig wees as jy beelde met deursigtige agtergronde het wat mekaar aanvul wanneer jy dit stapel.

Die eerste prentjie in die lys sal bo die ander vertoon word. Die tweede verskyn onder die eerste en so aan.

Metode 3
Stel `n agtergrond met gradiënt kleure

Gebruik CSS om `n kleurgradiënt agtergrond te skep. As jy op soek is na iets met meer styl as `n eenvoudige soliede kleur agtergrond, maar nie soos gehef as `n veelkleurige animasie, jy kan `n gradiënt van kleure probeer. Gradiente is kleure wat geleidelik in ander kleure verander. U kan die gradiënt skep en aanpas deur CSS te gebruik. Om `n gradiënt te kan maak, is dit nodig om die basiese aspekte van die styl van bladsye met CSS te verstaan.

Leer die basiese sintaks. Om `n gradiënt te skep, benodig jy twee dаta: die punt of die hoek van die begin en die kleure tussen wat jy die oorgang sal maak. Jy kan verskeie kleure kies en die helling tussen hulle almal maak. U kan ook `n adres of hoek vir die gradiënt stel.

agtergrond: lineêre gradiënt (rigting of hoek, kleur1, kleur2, kleur3, ens.) -

Skep `n vertikale gradiënt. As jy nie die rigting spesifiseer nie, gaan die gradiënt van bo na onder, dit wil sê van bo na onder. Verskillende blaaiers het verskillende implementerings van die gradiëntfunksies, dus dit is beter om verskeie weergawes van die kode in te sluit om verenigbaar met almal te wees.

Skep `n rigtinggradiënt. As jy die rigting van die gradiënt spesifiseer, kan jy die manier bepaal waarop die kleurverandering plaasvind. Hou in gedagte dat verskillende blaaiers verskillende maniere het om adresse te interpreteer. Maar almal sal dieselfde gradiënt toon.

Gebruik ander eienskappe om die gradiënt aan te pas. Daar is baie ander dinge wat jy met gradiënte kan doen.

Byvoorbeeld, jy kan nie net meer as twee kleure byvoeg nie, maar jy kan ook `n persentasie spesifiseer vir elkeen. Op hierdie manier kan jy vasstel hoeveel ruimte elke kleur segment moet beset.

agtergrond: lineêre gradiënt (# 93B874 10%, # C9DCB9 70%, # 000000 90%) -

Bepaal die deursigtigheid van die kleure. Op hierdie manier kan jy die kleure verdwyn. Byvoorbeeld, jy kan `n kleur van homself tot niks vervaag. Om dit te kan doen, moet jy die kleur deur die funksie definieer rgba (). Die finale waarde sal die deursigtigheid bepaal: 0 Dit is heeltemal solied en 1 heeltemal deursigtig.

agtergrond: lineêre gradiënt (regs, rgba (147,184,116,0), rgba (147,184,116.1)) -

Metode 4
Stel `n agtergrond wat kleur verander

Gaan na die afdeling van die HTML-kode. As jy nie van eenkleur agtergronde hou nie, probeer eksperimenteer met `n geanimeerde agtergrond wat kleur verander. Van HTML 5 moet alle agtergrond spesifikasies ingesluit word met CSS kode (cascading style sheets). As jy nog nooit `n agtergrond met CSS geskep het nie, gaan na die afdeling "Stel `n stewige kleur agtergrond" van hierdie artikel voordat u hierdie metode probeer.

Voeg die animasie-eiendom by die element "liggaam". Jy moet twee verskillende eienskappe byvoeg, aangesien verskillende blaaiers die kode anders interpreteer.

Die eiendom -WebKit-animasie is nodig vir blaaiers wat gebaseer is op Chromium (Chrome, Opera, Safari). animasie Dit is die standaard eiendom vir ander blaaiers.

In hierdie voorbeeld, ColorChange Dit sal die naam van die animasie wees.

60s (60 sekondes) dui die duur van die animasie of oorgang aan. Maak seker dat jy hierdie waarde in beide die webkit en die standaard sintaksis stel.

oneindige dui daarop dat die animasie onbepaald herhaal moet word. As u verkies dat die omskakeling van kleure slegs een keer plaasvind en in die laaste kleur stop, kan u die deel leeg laat.

Voeg die kleure van die animasie by. Nou moet jy die @keyframes-reël gebruik om die agtergrondkleure wat jy wil herhaal, te stel, asook hoe lank jy elke kleur op die bladsy wil hê. Weereens moet u verskillende inskrywings vir verskillende groepe blaaiers invoeg.

Hou in gedagte dat die twee reëls (@ -webkit-keyframes en @keyframes) het dieselfde kleure en persentasies vir die agtergrond. Dit is beter dat hierdie waardes uniform bly sodat die effekte in alle blaaiers dieselfde lyk.

Die persentasies (0%, 25%, ens.) is in verhouding tot die totale duur van die animasie (60s). Wanneer die bladsy laai, sal die agtergrond van die kleurstel vir 0% wees (# 33FFF3). Sodra die animasie vir 25% van die 60 sekondes gespeel is, sal die agtergrond omskep word # 78281F en so aan.

U kan die tye en kleure verander om hulle aan te pas by die verlangde resultaat.

Deel op sosiale netwerke:

Verwante