Pas die agtergrondkleur in HTML aan

Om die agtergrond van `n webblad in HTML te kan stel, hoef jy slegs `n klein verandering in die liggaamselement binne die

conținut

Stappe
Metode 1stel `n soliede agtergrondkleur in
Hierdie kop kry `n oranje agtergrond
Metode 2gebruik `n prent as agtergrond
Metode 3skep `n agtergrond met `n kleurgradiënt
Metode 4stel `n kleur animasie as `n agtergrond

tags. Die stappe hang af van hoe jy wil hê jou agtergrond moet lyk. Leer hoe om die agtergrond van jou webwerf as `n stewige kleur-, beeld-, gradiënt- of kleuranimasie te stel.

stappe

Metode 1
Stel `n soliede agtergrondkleur in

Open jou HTML-lêer in jou gunsteling teksredakteur. Van HTML5 sal die HTML-kenmerk wees word nie meer ondersteun nie. Die agtergrondkleur moet, soos alle ander stylaspekte van jou bladsy, met CSS gestel word.

Voeg die etikette in jou dokument. Alle stylinligting vir jou bladsy (insluitende die agtergrondkleur) moet binne hierdie etikette gekodeer word. Het jy die Merkers wat reeds aangedui is, kan eenvoudig na daardie deel van die lêer blaai.

Tik dit "body"element binne die tags. Alles wat jy daaraan verander "body"element in CSS, sal die hele bladsy beïnvloed.

Voeg die "background-color"eiendom aan dit "body"element. In hierdie konteks is slegs een spelling van "color" werk (nie: kleur).

Plaas die verlangde agtergrondkleur agter "background-color". U kan nou die naam van `n kleur spesifiseer (green, blue, red, ens.), met behulp van heksadesimale (heks) kodes (bv. # 000000 vir swart, # ff0000 vir rooi, ens.) of deur die RGB-waarde vir die kleur te tik (soos rgb (255,255.0) vir geel). Hieronder is `n voorbeeld met heksadesimale kodes, wat die agtergrond dieselfde maak as die vaandel van wikiHow:

wit: #FFFFFF

Ligte pienk: # FFCCE6

Gebrande sienna: # 993300

Indigo - # 4B0082

Violet - # EE82EE

Bekyk die w3schools.com HTML Kleurkieser Om die heksekodes van enige gewenste kleur te vind.

gebruik "background-color" vir die toepassing van agtergrondkleure op ander elemente. Net soos jy die liggaamselement gestel het, kan jy agtergrondkleur gebruik om die agtergrond van ander elemente te stel. Plaas net die elemente binne die met die agtergrondkleur eiendom.

Hierdie kop kry `n oranje agtergrond

Hierdie paragraaf word `n rooi agtergrond gegee

Metode 2
Gebruik `n prent as agtergrond

Open die HTML-lêer in `n teksredigeerder. Baie mense verkies om `n prent as agtergrond vir hul webwerf te gebruik. Laat jou toe om `n patroon, tekstuur, foto of enige ander beeld as agtergrond te stel. Van HTML5 moet alle agtergronde ingestel word met CSS (Cascading Style Sheets) binne die tags.

Voeg die Voeg etikette by jou HTML-lêer. Alle stylinligting vir jou bladsy (insluitend die agtergrondkleur) moet in hierdie etikette aangedui word. Jy het reeds etikette, blaai dan na daardie deel van die lêer.

Tik dit "body"element binne die tags. Alles wat jy daaraan verander "body"element in CSS sal die hele bladsy beïnvloed.

Voeg die eiendom by "background-image" tot dit "body"element. Wanneer u hierdie eiendom byvoeg, benodig u die lêernaam van u prent. Maak seker dat die prent in dieselfde gids as die HTML-lêer gestoor word (of voeg die volle pad na die lêer by jou webbediener).

Dit is ook `n goeie idee om die kode ook in te sluit background-color voeg by, net as die agtergrond prent nie wil laai nie.

Pas lae veelvuldige beelde toe. Jy kan verskeie beelde bo-op mekaar stapel. Dit kan nuttig wees as jy beelde met deursigtige agtergronde het wat mekaar aanvul wanneer hulle bo-op mekaar is.

Die eerste prentjie is bo-op. Die tweede beeld is onder die eerste.

Metode 3
Skep `n agtergrond met `n kleurgradiënt

Gebruik CSS om `n agtergrond met `n kleurgradiënt te skep. As jy op soek is na iets wat gestileer is as `n stewige kleur, maar nie so druk as `n kleuranimasie nie, probeer `n agtergrondkleurgradiënt. Gradiente is kleure wat in ander kleure verander. Jy kan CSS gebruik om jou gradiënt te skep en aan te pas. Voordat jy begin om kleur te maak, moet jy genoeg kennis hê van die basiese beginsels van die skep van `n webblad met CSS.

Verstaan die standaard sintaksis. Wanneer u `n kleurgradiënt skep, is daar twee stukke inligting wat u benodig: die beginpunt en die beginhoek en die kleure tussen die oorgang sal plaasvind. Jy kan verskeie kleure kies wat oorvleuelend is en jy kan `n rigting of hoek vir die gradiënt spesifiseer.

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

Skep `n vertikale kleurgradiënt. As jy nie `n rigting aandui nie, gaan die kleur van bo na onder. Verskillende blaaiers het verskillende weergawes van die kleurgradiëntfunksie, dus jy moet verskillende weergawes van die kode byvoeg.

Maak `n kleurgradiënt met `n rigting. As jy `n rigting aan die kleurgradiënt voeg, kan jy die manier verander waarop die kleur verander. Let daarop dat verskillende blaaiers die aanwysings op verskillende maniere sal interpreteer. Hulle sal almal dieselfde kleurgradiënt toon.

Gebruik ander eienskappe om die kleurgradiënt aan te pas. Jy kan baie meer met kleurgradiënte doen.

Byvoorbeeld, jy kan nie net meer as twee kleure gebruik nie, maar ook `n persentasie agter elkeen hê. Hiermee kan jy aandui hoeveel spasie elke kleur segment sal ontvang.

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

Voeg deursigtigheid by die kleure. Hiermee kan jy die kleure vervaag. Gebruik dieselfde kleur om van die kleur tot niks te vervaag. Jy sal die funksie hê rgba () moet gebruik om die kleur aan te dui. Die finale waarde bepaal die mate van deursigtigheid: 0 vir ondeursigtig en 1 vir deursigtig.

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

Metode 4
Stel `n kleur animasie as `n agtergrond

Navigeer na in u HTML-kode. As jy `n soliede agtergrondkleur vind, maar nie, eksperimenteer jy met veranderende kleur agtergronde. Van HTML 5 moet agtergrond kleure gedefinieer word met CSS (Cascading Style Sheets). As jy nog nooit `n agtergrondkleur met CSS gestel het nie, lees die gedeelte oor die vasstelling van `n stewige agtergrondkleur voordat jy hierdie metode probeer.

Voeg die eiendom by animation tot dit "body"element. Jy moet 2 verskillende eienskappe byvoeg, want elke blaaier benodig verskillende kode.

-webkit animasie is die eiendom benodig vir Chrome-gebaseerde blaaiers (Chrome, Opera, Safari). animation is die verstek vir alle ander blaaiers.

colorchange is dit wat die animasie in hierdie voorbeeld genoem word.

60s is die duur (60 sekondes) van die animasie / oorgang. Maak seker dat jy dit vir beide die webkit en die standaard sintaksis stel.

infinite dui aan dat die animasie onbepaald moet herhaal. As u verkies om die kleure in `n lus te laat loop en dan by die laaste kleur te stop, kan u hierdie stuk weglaat.

Voeg kleure by jou animasie. Nou gaan jy die @ keyframes-reël gebruik om die agtergrondkleure te laat deurbeweeg, asook hoe lank elke kleur op die bladsy verskyn. Weereens moet u verskeie kodes vir die verskillende blaaiers byvoeg.

Let daarop dat die twee reëls (@ -webkit sleutelkaarte en @keyframes het dieselfde waardes vir die agtergrond kleure en persentasies. Dit moet uniform bly, sodat die ervaring dieselfde bly vir alle blaaiers.

Die persentasies (0%, 25%, ens.) verteenwoordig die totale duur van die animasie (60s). Wanneer die bladsy die agtergrond laai, sal die kleur ingestel wees 0% en (# 33FFF3). As 25% of 60 sekondes van die animasie gespeel is, sal die agtergrond oorskakel na # 78281F, en so aan.

Jy kan die tyd en kleure na jou smaak pas.

Deel op sosiale netwerke:

Verwante