HTMLдеги фон түсүн тууралаңыз

Автор: Judy Howell
Жаратылган Күнү: 5 Июль 2021
Жаңыртуу Күнү: 1 Июль 2024
Anonim
Bubble Bubble.io Tutorial | CREATING A MINI CANVA WITH PEXELS
Видео: Bubble Bubble.io Tutorial | CREATING A MINI CANVA WITH PEXELS

Мазмун

Веб-баракчанын фонун HTML-де орнотуу үчүн, жөн гана "дене" элементине кичине өзгөртүү киргизишиңиз керек style> / style> тэгдер. Кадамдар сиздин обои кандай көрүнүшүңүзгө жараша болот. Вебсайтыңыздын фонун бир өң, сүрөт, градиент же түстүү анимация катары коюуну үйрөнүңүз.

Басуу

4-ыкманын 1-ыкмасы: Фондук түстү коюу

  1. HTML файлыңызды сүйүктүү текст редакторунда ачыңыз. HTML5 баштап, HTML атрибуту bgcolor> мындан ары колдоого алынбайт. Фондун түсү, сиздин баракчаңыздын бардык башка стилдери сыяктуу эле, CSS менен белгилениши керек.
  2. Кошуу style> / style> документти белгилейт. Сиздин баракчаңыздагы бардык стилдеги маалыматтар (анын ичинде фон өңү) ушул тегдердин ичинде коддолушу керек. Сизде барбы style> мурунтан эле көрсөтүлгөн тэгдер болсо, анда файлдын ошол бөлүгүнө өтсөңүз болот.

    ! DOCTYPE html> html> head> style> / style> / head> / html>

  3. Ичине "тулку" элементин териңиз style> / style> тэгдер. CSS ичиндеги "тулку" элементин өзгөрткөнүңүздүн бардыгы баракчага таасирин тийгизет.

    ! DOCTYPE html> html> head> style> body {} / style> / head> body> / body> / html>

  4. "Дене" элементине "background-color" касиетин кошуңуз. Бул контекстте бир гана "түс" орфографиясы иштейт (эмес: түс).

    ! DOCTYPE html> html> head> style> body {background-color:} / style> / head> body> / body> / html>

  5. "Фон-түстүн" артына керектүү фон түсүн коюңуз. Эми түстүн атын көрсөтсөңүз болот (жашыл, Көк, edж.б.), он алтылык (он алтылык) коддорун колдонуңуз (мис. #000000 кара үчүн, # ff0000 кызыл ж.б. үчүн) же түс үчүн RGB маанисин терүү менен (мис rgb (255,255,0) сары үчүн). Төмөндө wikiHow баннерине окшош кылып, алты бурчтуу коддору бар мисал келтирилген:

    ! DOCTYPE html> html> head> style> body {background-color: # 93B874; } / style> / head> body> / body> / html>

    • Ак: #FFFFFF
    • Ачык кызгылтым: # FFCCE6
    • Күйгөн Сиена: #993300
    • Индиго - # 4B0082
    • Violet - # EE82EE
    • W3schools.com HTML Color Pickerди карап, каалаган түстөгү алты бурчтуу коддорду табыңыз.
  6. Фон түсүн башка элементтерге колдонуу үчүн "фон-түс" колдонуңуз. Негизги элементти орноткондой эле, башка элементтердин фондорун коюу үчүн фон-түстү колдонсоңуз болот. Бул элементтерди жөн гана ичинде жайгаштырыңыз style> / style> фон-түс касиети менен.

    ! DOCTYPE html> html> head> style> body {background-color: # 93B874; } h1 {өң-түс: кызгылт сары; } p {background-color: rgb (255,0,0); } / style> / head> body> h1> Бул аталыш кызгылт сары түстө болот / h1> p> Бул абзацта кызыл фон / p> / body> / html>

4-ыкманын 2-ыкмасы: Сүрөттү фон катары колдонуу

  1. Текст редакторунда HTML файлын ачыңыз. Көптөгөн адамдар сүрөттү веб-сайттын фону катары пайдаланууну туура көрүшөт. Ушунун жардамы менен сиз фон, сүрөт, текстура, сүрөт же башка сүрөттөрдү орното аласыз. HTML5тен баштап, бардык фондор CSS (Cascading Style Sheets) менен орнотулушу керек style> / style> тэгдер.
  2. Кошуу style> / style> HTML файлыңызга тэгдер. Сиздин баракчаңыздагы бардык стилдик маалыматтар (анын фонунун түсүн кошкондо) ушул тегдердин ичинде көрсөтүлүшү керек. Сиз буга чейин style> тегдер коюлган, файлдын ошол бөлүгүнө жылдырыңыз.

    ! DOCTYPE html> html> head> style> / style> / head> / html>

  3. Ичине "тулку" элементин териңиз style> / style> тэгдер. CSS ичиндеги "тулку" элементин өзгөрткөнүңүздүн бардыгы баракчага таасирин тийгизет.

    ! DOCTYPE html> html> head> style> body {} / style> / head> body> / body> / html>

  4. "Дене" элементине "background-image" касиетин кошуңуз. Бул касиетти кошууда сизге сүрөтүңүздүн файлдын аталышы керек болот. Сүрөт html файлы сыяктуу эле папкада сакталгандыгын текшерип алыңыз (же файлдын толук жолун веб-серверге кошуңуз).

    ! DOCTYPE html> html> head> style> body {background-image: url ("imagename.png"); background-color: # 93B874; } / style> / head> body> / body> / html>

    • Кодду кошсоңуз жакшы болот фон-түс жөн гана фондук сүрөт жүктөлбөй калса.
  5. Бир нече сүрөттөрдү катмарлап коюу. Бир нече сүрөттөрдү бири-биринин үстүнө үйүп койсоңуз болот. Эгерде сизде бири-бирин толуктап турган ачык-айкын фон менен сүрөттөрүңүз болсо, пайдалуу болушу мүмкүн.

    ! DOCTYPE html> html> head> style> body {background-image: url ("image1.png"), url ("image2.gif"); background-color: # 93B874; } / style> / head> body> / body> / html>

    • Биринчи сүрөт жогору жагында. Экинчи сүрөт биринчи сүрөттүн төмөн жагында.

4-ыкманын 3-ыкмасы: Градиенттик фон түзүңүз

  1. Градиенттик фон түзүү үчүн CSS колдонуңуз. Эгер сиз бир түстө эмес, стилдештирилген, бирок түстүү анимациядай алек болбогон нерсени издесеңиз, градиенттик фонду байкап көрүңүз. Градиенттер - бул башка теңдиктерге өзгөрүүчү түстөр. Сиз градиентти түзүү жана жөндөө үчүн CSS колдоно аласыз. Түстүү градиент түзүүнү баштоодон мурун, веб-баракчаны CSS менен форматтоонун негиздери жөнүндө жетиштүү билим алышыңыз керек.
  2. Стандарттык синтаксисти түшүнүү. Градиент түзүүдө сизге эки маалымат керек болот: баштапкы чекит жана баштапкы бурч жана алардын ортосунда өтүү орун алган түстөр. Бири-бири дал келген бир нече түстөрдү тандап, градиент үчүн багытты же бурчун көрсөтсөңүз болот.

    фон: сызыктуу-градиент (багыт / бурч, color1, color2, color3 ж.б.);

  3. Тик градиент түзүү. Эгер сиз багытты көрсөтпөсөңүз, анда түс жогору жактан ылдый карай чуркайт. Ар кандай браузерлерде градиент функциясынын ар кандай версиялары бар, андыктан коддун ар кандай версияларын кошуу керек болот.

    ! DOCTYPE html> html> head> style> html {min-height: 100%; / * Бул градиенттин бардык баракты камтышы үчүн талап кылынат * /} тулку бою {background: -webkit-linear-gradient (# 93B874, # C9DCB9); / * Chrome 10+, Safari 5.1+ * / background: -o-lineer-gradient (# 93B874, # C9DCB9); / * Opera 11.1+ * / background: -moz-linear-gradient (# 93B874, # C9DCB9); / * Firefox 3.6+ * / фон: сызыктуу-градиент (# 93B874, # C9DCB9); / * Демейки синтаксис (акыркы болушу керек) * / background-color: # 93B874; / * Градиент * /} / style> / head> body> / body> / html> жүктөлбөсө, фон түсүн коюу жакшы идея.

  4. Багыты бар градиент түзүңүз. Градиентке багыт кошуу түстүн жылышуусун жөндөөгө мүмкүндүк берет. Ар кандай браузерлер багыттарды ар башкача чечмелей тургандыгын эске алыңыз. Алардын бардыгы бирдей түс градиентин көрсөтүшөт.

    ! DOCTYPE html> html> head> style> html {min-height: 100%; } тулку {фондук: -webkit-сызыктуу-градиент (сол, # 93B874, # C9DCB9); / * солдон оңго * / фон: -о-сызыктуу-градиент (оң, # 93B874, # C9DCB9); / * оң жактагы аягы * / фон: -moz-сызыктуу-градиент (оң, # 93B874, # C9DCB9); / * оң жактагы аягы * / фон: сызыктуу-градиент (оңго, # 93B874, # C9DCB9); / * оң тарапка жылат * / background-color: # 93B874; / * градиент жүктөлбөй калса, фон түсүн коюу жакшы идея * /} / style> / head> body> / body> / html>

  5. Градиентти жөндөө үчүн башка касиеттерди колдонуңуз. Градиенттер менен дагы көп нерсени жасай аласыз.
    • Мисалы, экиден ашык түстөрдү колдонуп гана тим болбостон, ар биринин артына пайызын коё аласыз. Муну менен ар бир түстүү сегмент канча орун алаарын көрсөтсөңүз болот.

      фондук: сызыктуу-градиент (# 93B874 10%, # C9DCB9 70%, # 000000 90%);

    • Түстөргө тунуктугун кошуңуз. Муну менен сиз түстөрдү өчүрө аласыз. Түстөн жок болуп, өчүп калуу үчүн бир эле түстү колдонуңуз. Сиз функцияны жакшы көрөсүз rgba () түсүн көрсөтүү үчүн колдонушу керек. Акыркы маани ачыктыктын даражасын аныктайт: 0 тунук эмес жана 1 тунук үчүн.

      фон: сызыктуу градиент (оңго, rgba (147,184,116.0), rgba (147,184,116.1));

4 ыкмасы 4: Тушкагаз катары түстүү анимацияны коюңуз

  1. Баруу style> сиздин HTML кодуңузда. Эгерде сиз фондун түсүн тапсаңыз, бирок таппай жатсаңыз, түстүү фондорду өзгөртүү менен тажрыйба жүргүзүңүз. HTML 5тен, фондук түстөр CSS (Cascading Style Sheets) менен аныкталууга тийиш. Эгерде сиз эч качан CSS менен фондун түсүн орноткон эмес болсоңуз, анда ушул ыкманы колдонуудан мурун туруктуу фон түсүн коюу бөлүмүн окуп чыгыңыз.
  2. Мүлктү кошуу анимация "дене" элементине. Ар бир браузерге ар кандай код талап кылынгандыктан, сизге 2 башка касиет кошуу керек болот.

    ! DOCTYPE html> html> head> style> body {-webkit-animation: colorchange 60s infinite; анимация: colors 60s чексиз; } / style> / head> body> / body> / html>

    • -webkit-анимация мулк Chrome негизделген браузерлерге (Chrome, Opera, Safari) талап кылынат. анимация башка бардык браузерлер үчүн стандарттуу.
    • colorchange Бул мисалда анимация деп аталган нерсе.
    • 60-жылдар - анимациянын / өтүүнүн узактыгы (60 секунд). Муну вебкитке да, демейки синтаксиске да орнотконуңузга ынаныңыз.
    • чексиз анимациянын чексиз кайталанышы керек экендигин көрсөтөт. Эгерде сиз түстөрдү циклге салып, андан кийин акыркы түскө токтогонуңуз келсе, анда бул бөлүктү таштап койсоңуз болот.
  3. Анимацияңызга түстөрдү кошуңуз. Эми фондук түстөрдү коюу үчүн, ошондой эле ар бир түстүн канча убакыттан бери баракчадан көрүнүп турушу үчүн @keyframes эрежесин колдоносуз. Дагы, ар кандай браузерлер үчүн бир нече кодированиелерди кошууга туура келет.

    ! DOCTYPE html> html> head> style> body {-webkit-animation: colorchange 60s infinite; анимация: colors 60s чексиз; } @ -webkit-keyframes түсүн өзгөртүү {0% {background: # 33FFF3;} 25% {background: # 78281F;} 50% {background: # 117A65;} 75% {background: # DC7633;} 100% {background: # 9B59B6;}} @keyframes colorchange {0% {background: # 33FFF3;} 25% {background: # 78281F;} 50% {background: # 117A65;} 75% {background: # DC7633;} 100% {background: # 9B59B6;}} / style> / head> body> / body> / html>

    • Эки сап (@ -webkit-keyframes жана @keyframes фондук түстөр жана пайыздар үчүн бирдей мааниге ээ. Бул тажрыйба бардык браузерлерде бирдей болуп турушу үчүн бир калыпта болушу керек.
    • Пайыздар (0%, 25%ж.б.) анимациянын жалпы узактыгын билдирет (60-жылдар). Баракча жүктөлгөндө, фондун түсү коюлган болот 0% жана (# 33FFF3). Анимациянын 25% же 60 секундасы ойногондо, фондук режимге өтөт # 78281F, жана башка.
    • Узактыгын жана түстөрүн каалагандай тууралай аласыз.

Совет

Килемден чачтын туруктуу боёгун алып салыңыз
Килемден чачтын туруктуу боёгун алып салыңыз
Эпоксиддик чайыр түстөрү
Эпоксиддик чайыр түстөрү
Кош бойлуу экениңизди билип алыңыз
Кош бойлуу экениңизди билип алыңыз
Кагаз пирамида жасоо
Кагаз пирамида жасоо