MəZmun

• Addımlamaq
• Metod 4-dən 1: Qatı bir fon rəngi təyin etmək
• Metod 4-dən 2: Bir şəkilin arxa plan olaraq istifadə edilməsi
• Metod 3-dən 3: Bir gradyan arxa plan yaradın
• Metod 4-dən 4: Divar kağızı olaraq rəngli bir animasiya təyin edin

Bir veb səhifənin arxa planını HTML dilində qurmaq üçün, sadəcə "bədən" elementində kiçik bir dəyişiklik etməlisiniz. stil> / stil> etiketlər. Adımlar divar kağızınızın necə görünməsini istədiyinizə bağlıdır. Veb saytınızın arxa planını düz rəng, şəkil, qradiyent və ya rəngli animasiya kimi qurmağı öyrənin.

Addımlamaq

Metod 4-dən 1: Qatı bir fon rəngi təyin etmək

1. HTML sənədinizi sevdiyiniz mətn redaktorunda açın. HTML5-dən etibarən HTML atributu bgcolor> artıq dəstəklənmir. Arka plan rəngi, səhifənizin bütün digər üslubları kimi, CSS ilə təyin olunmalıdır.
2. Əlavə edin stil> / stil> sənədinizi işarələyir. Səhifəniz üçün bütün üslub məlumatları (fon rəngi daxil olmaqla) bu etiketlər daxilində kodlanmalıdır. Sizdə var stil> işarələr artıq göstərilmişdir, onda yalnız sənədin həmin hissəsinə keçə bilərsiniz.

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

3. İçərisindəki "gövdə" elementini yazın stil> / stil> etiketlər. CSS-də "bədən" elementini dəyişdirdiyiniz hər şey bütün səhifəni təsir edəcəkdir.

   ! DOCTYPE html> html> baş> stil> gövdə {} / stil> / baş> gövdə> / bədən> / html>

4. "Bədən" elementinə "background-color" xassəsini əlavə edin. Bu çərçivədə yalnız bir "rəng" yazısı işləyəcək (deyil: rəng).

   ! DOCTYPE html> html> baş> stil> gövdə {background-color:} / style> / head> body> / body> / html>

5. İstədiyiniz fon rəngini "fon rəngi" nin arxasına qoyun. İndi bir rəng adını göstərə bilərsiniz (yaşıl, mavi, edvə s.), onaltılık (hex) kodlardan istifadə edin (məsələn. #000000 qara üçün, # ff0000 qırmızı üçün və s.) və ya rəng üçün RGB dəyərini yazaraq (məsələn rgb (255,255,0) sarı üçün). Aşağıda, arxa planı wikiHow banner ilə eyni hala gətirən, onaltılıq kodlu bir nümunə verilmişdir:

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

   • Ağ: #FFFFFF
   • Açıq çəhrayı: # FFCCE6
   • Yanmış Sienna: #993300
   • İndiqo - # 4B0082
   • Bənövşəyi - # EE82EE
   • İstədiyiniz hər hansı bir rəngin hex kodlarını tapmaq üçün w3schools.com HTML Rəng Seçici seçiminə baxın.
6. Arka plan rənglərini digər elementlərə tətbiq etmək üçün "fon rəngi" istifadə edin. Bədən elementini təyin etdiyiniz kimi, digər elementlərin də arxa planlarını təyin etmək üçün fon rəngi istifadə edə bilərsiniz. Yalnız bu elementləri içərisinə yerləşdirin stil> / stil> fon rəngi xassəsi ilə.

   ! DOCTYPE html> html> head> style> body {background-color: # 93B874; } h1 {fon rəngi: narıncı; } p {background-color: rgb (255,0,0); } / style> / head> body> h1> Bu başlıq narıncı bir fon alır / h1> p> Bu paraqraf qırmızı bir fon alır / p> / body> / html>

Metod 4-dən 2: Bir şəkilin arxa plan olaraq istifadə edilməsi

1. HTML sənədini mətn redaktorunda açın. Bir çox insan veb səhifəsi üçün bir şəkil kimi bir fon istifadə etməyi üstün tutur. Bununla bir naxış, toxuma, fotoşəkil və ya hər hansı digər bir şəkil fon olaraq təyin edə bilərsiniz. HTML5-dən, bütün arxa planlar daxilində CSS (Cascading Style Sheets) ilə ayarlanmalıdır stil> / stil> etiketlər.
2. Əlavə edin stil> / stil> HTML sənədinizə etiketlər. Səhifəniz üçün bütün üslub məlumatları (arxa plan rəngi daxil olmaqla) bu etiketlərdə göstərilməlidir. Onsuz da var stil> etiketlər qoyulub, faylın həmin hissəsinə keçin.

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

3. İçərisindəki "gövdə" elementini yazın stil> / stil> etiketlər. CSS-də "bədən" elementini dəyişdirdiyiniz hər şey bütün səhifəni təsir edəcəkdir.

   ! DOCTYPE html> html> baş> stil> gövdə {} / stil> / baş> gövdə> / bədən> / html>

4. "Bədən" elementinə "background-image" xassəsini əlavə edin. Bu mülk əlavə edərkən şəklin fayl adına ehtiyacınız olacaq. Görünüşün html faylı ilə eyni qovluqda saxlandığından əmin olun (və ya veb-serverinizə faylın tam yolunu əlavə edin).

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

   • Kodu əlavə etmək yaxşıdır fon rəngi yalnız arxa planın yüklənməməsi vəziyyətində.
5. Birdən çox şəkil qatın. Birdən çox şəkili bir-birinin üstünə yığa bilərsiniz. Yerləşdirildikdə bir-birini tamamlayan şəffaf fonları olan şəkilləriniz varsa, bu faydalı ola bilər.

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

   • İlk şəkil üstdədir. İkinci şəkil birincinin altındadır.

Metod 3-dən 3: Bir gradyan arxa plan yaradın

1. Bir gradient fon yaratmaq üçün CSS istifadə edin. Qatı rəngdən biraz daha stilizə edilmiş, lakin rəngli animasiya qədər məşğul olmayan bir şey axtarırsınızsa, bir gradient arxa planı sınayın. Gradients digər bərabərliklərə dəyişən rənglərdir. Qradiyentinizi yaratmaq və tənzimləmək üçün CSS-dən istifadə edə bilərsiniz. Bir rəng qradiyenti yaratmağa başlamazdan əvvəl bir veb səhifəni CSS ilə formatlaşdırma əsasları barədə kifayət qədər məlumat əldə etməlisiniz.
2. Standart sintaksisini anlayın. Bir gradyan yaratarkən sizə lazım olacaq iki məlumat var: başlanğıc nöqtəsi və başlanğıc bucağı və keçidin baş verəcəyi rənglər. Hamısı üst-üstə düşən birdən çox rəng seçə bilərsiniz və qradiyent üçün bir istiqamət və ya bir bucaq təyin edə bilərsiniz.

   arxa plan: xətti-qradiyent (istiqamət / bucaq, rəng1, rəng2, rəng3 və s.);

3. Şaquli bir qradiyent yaradın. Bir istiqaməti göstərməsəniz, rəng yuxarıdan aşağıya doğru uzanacaq. Fərqli brauzerlərdə gradient funksiyasının fərqli versiyaları mövcuddur, buna görə kodun fərqli versiyalarını əlavə etməlisiniz.

   ! DOCTYPE html> html> head> style> html {min-height: 100%; / * Bu, gradientin bütün səhifəni əhatə etməsini təmin etmək üçün tələb olunur * /} gövdə {background: -webkit-linear-gradient (# 93B874, # C9DCB9); / * Chrome 10+, Safari 5.1+ * / background: -o-lineer-gradient (# 93B874, # C9DCB9); / * Opera 11.1+ * / background: -moz-lineer-gradient (# 93B874, # C9DCB9); / * Firefox 3.6+ * / background: lineer-gradient (# 93B874, # C9DCB9); / * Varsayılan sintaksis (son olmalıdır) * / background-color: # 93B874; / * Qradiyentin yüklənməməsi halında bir arxa plan rəngi təyin etmək yaxşıdır * /} / style> / head> body> / body> / html>

4. Bir istiqamətə sahib bir gradient yaradın. Qradiyentə bir istiqamət əlavə etmək rəng dəyişmə qaydasını tənzimləməyə imkan verir. Fərqli brauzerlərin istiqamətləri fərqli şəkildə şərh edəcəyini unutmayın. Hamısı eyni rəng qradiyentini göstərəcəkdir.

   ! DOCTYPE html> html> head> style> html {min-height: 100%; } gövdə {background: -webkit-lineer-gradient (sol, # 93B874, # C9DCB9); / * soldan sağa * / arxa plan: -o-lineer-gradient (sağ, # 93B874, # C9DCB9); / * sağ tərəfdəki son * * / arxa plan: -moz-lineer-gradient (sağ, # 93B874, # C9DCB9); / * sonda sağda * * / fon: xətti-qradiyent (sağa, # 93B874, # C9DCB9); / * sağ tərəfə keçir * / background-color: # 93B874; / * gradyan yükləməyəcəyi təqdirdə bir arxa plan rəngi təyin etmək yaxşıdır * /} / style> / head> body> / body> / html>

5. Qradiyenti tənzimləmək üçün digər xüsusiyyətlərdən istifadə edin. Qradiyentlərlə daha çox şey edə bilərsiniz.
   • Məsələn, yalnız ikidən çox rəng istifadə edə bilməzsiniz, həm də hər birinin arxasına bir faiz yerləşdirə bilərsiniz. Bununla hər rəng seqmentinin nə qədər yer alacağını göstərə bilərsiniz.

     arxa plan: xətti-qradiyent (# 93B874 10%, # C9DCB9 70%, # 000000 90%);

   • Rənglərə şəffaflıq əlavə edin. Bununla rəngləri sola bilərsiniz. Rəngdən heç bir şeyə yox olmaq üçün eyni rəngdən istifadə edin. Funksiyanı sevəcəksiniz rgba () rəngi göstərmək üçün istifadə etməlidir. Son dəyər şəffaflıq dərəcəsini təyin edir: 0 qeyri-şəffaf və 1 şəffaf üçün.

     arxa plan: xətti qradiyent (sağa, rgba (147,184,116.0), rgba (147,184,116.1));

Metod 4-dən 4: Divar kağızı olaraq rəngli bir animasiya təyin edin

1. Gedin stil> HTML kodunuzda. Qatı bir fon rəngi tapırsınız, amma tapa bilmirsinizsə, dəyişən rəng fonlarını sınayın. HTML 5-dən arxa plan rəngləri CSS (Cascading Style Sheets) ilə müəyyənləşdirilməlidir. Əgər heç vaxt CSS ilə arxa plan rəngi təyin etməmisinizsə, bu metodu sınamadan əvvəl möhkəm fon rəngi təyin etmə hissəsini oxuyun.
2. Əmlak əlavə edin animasiya "bədən" elementinə. Hər brauzer üçün fərqli kod tələb olunduğundan 2 fərqli xüsusiyyət əlavə etməlisiniz.

   ! DOCTYPE html> html> head> style> body {-webkit-animation: colorchange 60s sonsuz; animasiya: colors 60s sonsuz; } / style> / head> body> / body> / html>

   • -webkit-animasiya xüsusiyyət Chrome əsaslı brauzerlər (Chrome, Opera, Safari) üçün tələb olunur. animasiya bütün digər brauzerlər üçün standartdır.
   • rəng dəyişdirmə bu nümunədə animasiya deyilən şeydir.
   • 60-cı illər animasiya / keçidin müddəti (60 saniyə) dir. Bunu həm vebkit, həm də standart sintaksis üçün qurduğunuzdan əmin olun.
   • sonsuz animasiyanın sonsuzadək təkrarlanmalı olduğunu göstərir. Rəngləri dövrəyə salmağı və son rəngdə dayanmağı seçsəniz, bu hissəni buraxa bilərsiniz.
3. Animasiyanıza rənglər əlavə edin. İndi arxa plan rənglərini, eləcə də hər rəngin səhifədə nə qədər görünə biləcəyini təyin etmək üçün @keyframes qaydasını istifadə edəcəksiniz. Yenə də müxtəlif brauzerlər üçün birdən çox kodlama əlavə etməlisiniz.

   ! DOCTYPE html> html> head> style> body {-webkit-animation: colorchange 60s sonsuz; animasiya: colors 60s sonsuz; } @ -webkit-keyframes colorchange {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>

   • Qeyd edək ki, iki sətir (@ -webkit-keyframes və @keyframes arxa plan rəngləri və faizləri üçün eyni dəyərlərə malikdir. Təcrübənin bütün brauzerlər üçün eyni qalması üçün vahid qalmalıdır.
   • Faizlər (0%, 25%və s.) animasiyanın ümumi müddətini təmsil edir (60-cı illər). Səhifə yükləndikdə, arxa planda rəngi təyin olunmuş olacaq 0% və (# 33FFF3). Animasiyanın 25% -i və ya 60 saniyəsi oynandıqda, arxa plan keçəcəkdir # 78281F, və sair.
   • Müddəti və rəngləri istədiyiniz kimi tənzimləyə bilərsiniz.