sedhesrebsit.ru

Ajustați culoarea de fundal în HTML

Pentru a putea seta fundalul unei pagini web în HTML, trebuie doar să faceți o mică schimbare în elementul corpului în cadrul

etichete. Pașii depind de modul în care doriți să vi se pară fundalul. Aflați cum să setați fundalul site-ului dvs. ca o culoare solidă, imagine, gradient sau animație de culoare.

pași

Metoda 1
Setarea unei culori de fond solide

Imaginea intitulată 2609629 1 1
1
Deschideți fișierul HTML în editorul de text preferat. Din HTML5 va fi atributul HTML nu mai sunt acceptate. Culoarea de fundal trebuie, ca toate celelalte aspecte ale stilului paginii dvs., să fie setată cu CSS.
  • Imaginea intitulată 2609629 2 1
    2
    Adăugați etichete în documentul dvs. Toate informațiile despre stil pentru pagina dvs. (inclusiv culoarea de fundal) trebuie să fie codate în aceste etichete. Aveți tag-uri deja indicate, puteți pur și simplu să derulați la acea parte a fișierului.
  • Imaginea intitulată 2609629 3 1
    3
    Introduceți-l "corp"element în cadrul etichete. Tot ce vă schimbați "corp"element în CSS, va afecta întreaga pagină.
  • Imaginea intitulată 2609629 4 1
    4
    Adăugați "culoare de fundal"proprietate "corp"Element. În acest context, doar o singură ortografie "culoare" munca (nu: culoarea).
  • Imaginea intitulată 2609629 5 1
    5
    Plasați culoarea de fundal dorită în spatele acesteia "culoare de fundal". Acum puteți specifica numele unei culori (verde, albastru, roșu, etc), folosind coduri hexazecimale (hex) (ex. # 000000 pentru negru, # ff0000 pentru roșu etc.) sau tastând valoarea RGB pentru culoare (cum ar fi rgb (255,255,0) pentru galben). Mai jos este un exemplu cu codurile hexadeximale, ceea ce face fundalul la fel ca banner-ul wikiHow:
  • alb: #FFFFFF
  • Roz deschis: # FFCCE6
  • Sirena arsă: # 993300
  • Indigo - # 4B0082
  • Violet - # EE82EE
  • Vizualizați w3schools.com Alegerea culorii HTML pentru a găsi codurile hexagonale ale oricărei culori dorite.
  • Imaginea cu titlul 2609629 6 1
    6
    utilizare "culoare de fundal" pentru aplicarea culorilor de fundal pentru alte elemente. Așa cum ați setat elementul corpului, puteți utiliza culoarea de fundal pentru a seta fundalul altor elemente. Doar puneți acele elemente în interiorul cu proprietatea de culoare de fundal.
    Acest antet primește un fundal portocaliu
    Acest paragraf are un fundal roșu

    • Metoda 2
    Utilizați o imagine ca fundal

    Imaginea intitulată 2609629 7 1
    1
    Deschideți fișierul HTML într-un editor de text. Mulți oameni preferă să utilizeze o imagine ca fundal pentru site-ul lor. Permite setarea unui model, a unei texturi, a unei fotografii sau a oricărei alte imagini ca fundal. Din HTML5 toate fundalul trebuie să fie setat cu CSS (Cascading Style Sheets) în cadrul etichete.
  • Imaginea intitulată 2609629 8 1
    2
    Adăugați adăugați etichete în fișierul HTML. Toate informațiile despre stil pentru pagina dvs. (inclusiv culoarea de fundal) trebuie indicate în aceste etichete. Ai deja , apoi defilați la acea parte a fișierului.
  • Imaginea intitulată 2609629 9 1
    3
    Introduceți-l "corp"element în cadrul etichete. Tot ce vă schimbați "corp"element în CSS va afecta întreaga pagină.
  • Imaginea intitulată 2609629 10 1
    4


    Adăugați proprietatea "background-image" la el "corp"Element. Când adăugați această proprietate, aveți nevoie de numele fișierului imaginii dvs. Asigurați-vă că imaginea este stocată în același director ca fișierul html (sau adăugați calea completă la fișier către serverul dvs. web).
  • Este o idee bună să includeți și codul culoare de fundal adăugând, doar în cazul în care imaginea de fundal nu vrea să se încarce.
  • Imaginea intitulată 2609629 11 1
    5
    Aplicați straturi de imagini multiple. Puteți să încărcați mai multe imagini una peste alta. Acest lucru poate fi util dacă aveți imagini cu fundaluri transparente care se completează reciproc când se află una peste alta.
  • Prima imagine este deasupra. A doua imagine este sub prima.

    • Metoda 3
    Crearea unui fundal cu un gradient de culoare

    Imagine cu titlul 2609629 12
    1
    Utilizați CSS pentru a crea un fundal cu un gradient de culoare. Dacă sunteți în căutarea pentru ceva mai stilizat decât o culoare solidă, dar nu la fel de ocupat ca o animație de culoare, încercați un gradient de culoare de fundal. Gradienții sunt culori care se transformă în alte culori. Puteți utiliza CSS pentru a crea și ajusta gradientul. Înainte de a începe să faceți culori, trebuie să aveți cunoștințe suficiente despre principiile de bază ale creării unei pagini web cu CSS.
  • Imagine cu denumirea 2609629 13
    2
    Înțelegeți sintaxa standard. Când creați un gradient de culoare, există două informații de care aveți nevoie: punctul de pornire și unghiul de pornire și culorile între care va avea loc tranziția. Puteți selecta mai multe culori care se suprapun peste toate și puteți specifica o direcție sau un unghi pentru gradient.
    fundal: gradient liniar (direcție / unghi, culoare1, culoare2, culoare3, etc.) -
  • Image cu titlul 2609629 14
    3
    Creați un gradient vertical de culoare. Dacă nu indicați o direcție, culoarea va merge de sus în jos. Diferitele browsere au diferite versiuni ale funcției de gradient de culoare, deci va trebui să adăugați versiuni diferite ale codului.
  • Imagine cu denumirea 2609629 15
    4
    Faceți un gradient de culoare cu o direcție. Adăugarea unei direcții la gradientul de culoare vă oferă posibilitatea de a regla modul în care culorile se schimbă. Rețineți că diferite browsere vor interpreta instrucțiunile în moduri diferite. Toate acestea vor avea același gradient de culoare.
  • Image cu titlul 2609629 16
    5
    Utilizați alte proprietăți pentru a regla gradientul de culoare. Puteți face mult mai mult cu gradientele de culoare.
  • De exemplu, nu puteți utiliza mai mult de două culori, dar aveți și un procent în spatele fiecăruia. Cu aceasta puteți indica cât spațiu va primi fiecare segment de culoare.
    fundal: gradient linear (# 93B874 10%, # C9DCB9 70%, # 000000 90%) -
  • Adăugați transparență la culori. Cu aceasta puteți face să dispară culorile. Utilizați aceeași culoare pentru a decolora de la culoare la nimic. Veți avea funcția rgba () trebuie să utilizeze pentru a indica culoarea. Valoarea finală determină gradul de transparență: 0 pentru opac și 1 pentru transparență.
    fundal: gradient liniar (spre dreapta, rgba (147,184,116.0), rgba (147,184,116.1)) -

    • Metoda 4
    Setați o animație de culoare ca fundal

    Imaginea intitulată 2609629 17
    1
    Navigați la în codul HTML. Dacă găsiți o culoare de fond solidă, dar nu, atunci experimentați cu schimbarea fundalurilor de culoare. Din HTML 5, culorile de fundal trebuie definite cu CSS (Sheets of Cascading Style Sheets). Dacă nu ați setat niciodată o culoare de fundal cu CSS, citiți secțiunea privind setarea unei culori de fundal solide înainte de a încerca această metodă.
  • Imagine cu denumirea 2609629 18
    2
    Adăugați proprietatea animație la el "corp"Element. Va trebui să adăugați 2 proprietăți diferite, deoarece fiecare browser necesită un cod diferit.
  • -webkit animație este proprietatea necesară pentru browserele Chrome (Chrome, Opera, Safari). animație este implicit pentru toate celelalte browsere.
  • schimbare de culoare este ceea ce se numește animație în acest exemplu.
  • 60 de ani este durata (60 secunde) a animației / tranziției. Asigurați-vă că setați atât pentru webkit, cât și pentru sintaxa standard.
  • infinit indică faptul că animația trebuie să se repete pe o perioadă nedeterminată. Dacă preferați să executați culorile într-o buclă și apoi opriți la ultima culoare, puteți omite această piesă.
  • Imagine cu denumirea 2609629 19
    3
    Adăugați culori la animație. Acum veți folosi regula @ keyframes pentru a seta culorile de fundal care urmează să fie traversate, precum și cât timp fiecare culoare apare pe pagină. Din nou, va trebui să adăugați mai multe coduri pentru diferitele browsere.
  • Rețineți că cele două reguli (@ -webkit keyframes și @keyframes au aceleași valori pentru culorile și procentele de fundal. Trebuie să rămână uniformă, astfel încât experiența să rămână aceeași pentru toate browserele.
  • Procentele (0%, 25%, etc.) reprezintă durata totală a animației (60 de ani). Când pagina încarcă, fundalul va avea culoarea setată la 0% și (# 33FFF3). Dacă 25% sau 60 de secunde din animație au fost redate, fundalul va trece la # 78281F, și așa mai departe.
  • Puteți ajusta timpul și culorile după preferințele dvs.
    • Distribuiți pe rețelele sociale:

    înrudit
    Adăugați un comentariu în HTMLAdăugați un comentariu în HTML
    Creați fundaluri în Adobe PhotoshopCreați fundaluri în Adobe Photoshop
    Ajustați culoarea de fundal în PhotoshopAjustați culoarea de fundal în Photoshop
    Modificați culoarea de fundal în Adobe IllustratorModificați culoarea de fundal în Adobe Illustrator
    Faceți fundalul unei imagini transparent în Adobe IllustratorFaceți fundalul unei imagini transparent în Adobe Illustrator
    Schimbați fundalul unei imagini cu PaintSchimbați fundalul unei imagini cu Paint
    Adăugați o imagine de fundal în HTMLAdăugați o imagine de fundal în HTML
    Adăugați un fundal la un document WordAdăugați un fundal la un document Word
    Eliminați un fundal cu Photoshop ElementsEliminați un fundal cu Photoshop Elements
    Creați un meniu drop-down cu HTML și CSSCreați un meniu drop-down cu HTML și CSS
    » » Ajustați culoarea de fundal în HTML

    © 2011—2021 sedhesrebsit.ru