İçerik

• Adım atmak
• Yöntem 1/4: Düz bir arka plan rengi ayarlama
• Yöntem 2/4: Bir resmi arka plan olarak kullanma
• Yöntem 3/4: Degrade arka plan oluşturma
• Yöntem 4/4: Duvar kağıdı olarak bir renkli animasyon ayarlayın

HTML'de bir web sayfasının arka planını ayarlayabilmek için, sadece içindeki "gövde" öğesinde küçük bir değişiklik yapmanız gerekir. stil> / stil> etiketleri. Adımlar, duvar kağıdınızın nasıl görünmesini istediğinize bağlıdır. Web sitenizin arka planını düz renk, resim, gradyan veya renkli animasyon olarak nasıl ayarlayacağınızı öğrenin.

Adım atmak

Yöntem 1/4: Düz bir arka plan rengi ayarlama

1. HTML dosyanızı favori metin düzenleyicinizde açın. HTML5'ten itibaren, bgcolor> HTML özelliği artık desteklenmemektedir. Sayfanızın diğer tüm stil özellikleri gibi arka plan rengi de CSS ile ayarlanmalıdır.
2. Ekle stil> / stil> belgenizi etiketler. Sayfanız için tüm stil verileri (arka plan rengi dahil) bu etiketler içinde kodlanmalıdır. Sende var mı stil> etiketler zaten belirtilmişse, dosyanın o kısmına kaydırmanız yeterlidir.

   ! DOCTYPE html> html> başlık> stil> / stil> / başlık> / html>

3. "Body" öğesini yazın. stil> / stil> etiketleri. CSS'deki "gövde" öğesine değiştirdiğiniz herhangi bir şey tüm sayfayı etkileyecektir.

   ! DOCTYPE html> html> kafa> stil> gövde {} / stil> / kafa> gövde> / gövde> / html>

4. "Arka plan rengi" özelliğini "gövde" öğesine ekleyin. Bu bağlamda yalnızca bir "renk" yazımı çalışacaktır (değil: renk).

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

5. İstenilen arka plan rengini "arka plan rengi" arkasına yerleştirin. Artık bir rengin adını belirtebilirsiniz (yeşil, mavi, ed, vb.), onaltılık (onaltılık) kodlar kullanın (ör. #000000 siyah için # ff0000 kırmızı vb. için) veya rengin RGB değerini yazarak (örn. rgb (255,255,0) sarı için). Aşağıda, arka planı wikiHow başlığıyla aynı yapan onaltılık kodlar içeren bir örnek verilmiştir:

   ! DOCTYPE html> html> head> style> body {background-color: # 93B874; } / stil> / kafa> gövde> / gövde> / html>

   • Beyaz: #FFFFFF
   • Açık pembe: # FFCCE6
   • Yanmış Sienna: #993300
   • Indigo - # 4B0082
   • Menekşe - # EE82EE
   • İstediğiniz herhangi bir rengin onaltılık kodlarını bulmak için w3schools.com HTML Renk Seçici'ye bakın.
6. Diğer öğelere arka plan renkleri uygulamak için "arka plan rengi" ni kullanın. Gövde öğesini ayarladığınız gibi, diğer öğelerin arka planlarını ayarlamak için de arka plan rengini kullanabilirsiniz. Sadece bu öğeleri stil> / stil> background-color özelliği ile.

   ! DOCTYPE html> html> head> style> body {background-color: # 93B874; } h1 {arka plan rengi: turuncu; } p {arka plan rengi: rgb (255,0,0); } / style> / head> body> h1> Bu başlık turuncu bir arka plan alıyor / h1> p> Bu paragraf kırmızı bir arka plan alıyor / p> / body> / html>

Yöntem 2/4: Bir resmi arka plan olarak kullanma

1. HTML dosyasını bir metin düzenleyicide açın. Birçok kişi, web siteleri için arka plan olarak bir görseli kullanmayı tercih eder. Bununla arka plan olarak bir desen, doku, fotoğraf veya başka bir görüntü ayarlayabilirsiniz. HTML5'ten tüm arka planlar, içinde CSS (Basamaklı Stil Sayfaları) ile ayarlanmalıdır. stil> / stil> etiketleri.
2. Ekle stil> / stil> HTML dosyanıza etiketler. Sayfanız için tüm stil verileri (arka plan rengi dahil) bu etiketler içinde belirtilmelidir. Zaten var mı stil> etiket kümesi, dosyanın o kısmına ilerleyin.

   ! DOCTYPE html> html> başlık> stil> / stil> / başlık> / html>

3. "Body" öğesini yazın. stil> / stil> etiketleri. CSS'deki "gövde" öğesine değiştirdiğiniz herhangi bir şey tüm sayfayı etkileyecektir.

   ! DOCTYPE html> html> kafa> stil> gövde {} / stil> / kafa> gövde> / gövde> / html>

4. "Arka plan görüntüsü" özelliğini "gövde" öğesine ekleyin. Bu özelliği eklerken resminizin dosya adına ihtiyacınız olacaktır. Görüntünün html dosyasıyla aynı klasöre kaydedildiğinden emin olun (veya dosyanın tam yolunu web sunucunuza ekleyin).

   ! DOCTYPE html> html> head> stil> gövde {arkaplan-resmi: url ("resimadı.png"); arka plan rengi: # 93B874; } / stil> / kafa> gövde> / gövde> / html>

   • Kodu dahil etmek iyi bir fikirdir arka plan rengi arka plan resminin yüklenmemesi durumunda.
5. Birden çok görüntüyü katmanlayın. Birden çok görüntüyü üst üste yığabilirsiniz. Üst üste bindirildiğinde birbirini tamamlayan şeffaf arka plana sahip görüntüleriniz varsa bu yararlı olabilir.

   ! DOCTYPE html> html> head> stil> gövde {arka plan resmi: url ("resim1.png"), url ("resim2.gif"); arka plan rengi: # 93B874; } / stil> / kafa> gövde> / gövde> / html>

   • İlk resim üstte. İkinci resim birincinin altında.

Yöntem 3/4: Degrade arka plan oluşturma

1. Degrade arka plan oluşturmak için CSS kullanın. Düz renkten biraz daha stilize bir şey arıyorsanız, ancak renkli animasyon kadar meşgul değilseniz, gradyan arka planı deneyin. Degradeler, diğer eşitliklere dönüşen renklerdir. Renk geçişinizi oluşturmak ve ayarlamak için CSS kullanabilirsiniz. Bir renk gradyanı oluşturmaya başlamadan önce, bir web sayfasını CSS ile biçimlendirmenin temelleri hakkında yeterli bilgi edinmelisiniz.
2. Standart sözdizimini anlayın. Bir gradyan oluştururken, ihtiyacınız olacak iki parça bilgi vardır: başlangıç ​​noktası ve başlangıç ​​açısı ve aralarında geçişin gerçekleşeceği renkler. Tamamı örtüşen birden çok renk seçebilir ve degrade için bir yön veya açı belirtebilirsiniz.

   arka plan: doğrusal gradyan (yön / açı, renk1, renk2, renk3, vb.);

3. Dikey bir degrade oluşturun. Bir yön belirtmezseniz, renk yukarıdan aşağıya doğru akacaktır. Farklı tarayıcılarda gradyan işlevinin farklı sürümleri vardır, bu nedenle kodun farklı sürümlerini eklemeniz gerekir.

   ! DOCTYPE html> html> head> stil> html {min-height: 100%; / * Bu, degradenin sayfanın tamamına yayılmasını sağlamak için gereklidir * /} body {background: -webkit-linear-gradient (# 93B874, # C9DCB9); / * Chrome 10+, Safari 5.1+ * / background: -o-lineer-gradyan (# 93B874, # C9DCB9); / * Opera 11.1+ * / arkaplan: -moz-doğrusal-gradyan (# 93B874, # C9DCB9); / * Firefox 3.6+ * / background: doğrusal gradyan (# 93B874, # C9DCB9); / * Varsayılan sözdizimi (son olmalıdır) * / background-color: # 93B874; / * Degradenin yüklenmemesi durumunda bir arka plan rengi ayarlamak iyi bir fikirdir * /} / style> / head> body> / body> / html>

4. Yönlü bir gradyan oluşturun. Degradeye yön eklemek, rengin kayma şeklini ayarlamanıza olanak tanır. Farklı tarayıcıların talimatları farklı şekilde yorumlayacağını unutmayın. Hepsi aynı renk gradyanını gösterecektir.

   ! DOCTYPE html> html> head> stil> html {min-height: 100%; } gövde {arka plan: -webkit-doğrusal-gradyan (sol, # 93B874, # C9DCB9); / * soldan sağa * / arka plan: -o-doğrusal-gradyan (sağ, # 93B874, # C9DCB9); / * sağdaki son * / arkaplan: -moz-doğrusal-gradyan (sağ, # 93B874, # C9DCB9); / * sağdaki son * / arka plan: doğrusal gradyan (sağa, # 93B874, # C9DCB9); / * sağ tarafa gider * / background-color: # 93B874; / * degradenin yüklenmemesi durumunda bir arka plan rengi ayarlamak iyi bir fikirdir * /} / style> / head> body> / body> / html>

5. Gradyanı ayarlamak için diğer özellikleri kullanın. Gradyanlarla çok daha fazlasını yapabilirsiniz.
   • Örneğin, yalnızca ikiden fazla renk kullanmakla kalmaz, aynı zamanda her birinin arkasına bir yüzde de koyabilirsiniz. Bununla, her bir renk segmentinin ne kadar alan alacağını belirtebilirsiniz.

     arka plan: doğrusal gradyan (# 93B874% 10, # C9DCB9% 70, # 000000% 90);

   • Renklere şeffaflık katın. Bununla renkleri soldurabilirsiniz. Rengi sıfıra düşürmek için aynı rengi kullanın. İşlevi seveceksin rgba () rengi belirtmek için kullanmalısınız. Son değer, şeffaflık derecesini belirler: 0 opak ve 1 şeffaf için.

     arka plan: doğrusal gradyan (sağa, rgba (147,184,116.0), rgba (147,184,116.1));

Yöntem 4/4: Duvar kağıdı olarak bir renkli animasyon ayarlayın

1. Şu yöne rotayı ayarla stil> HTML kodunuzda. Düz bir arka plan rengi bulursanız ancak bulamazsanız, değişen arka plan rengini deneyin. HTML 5'ten, arka plan renkleri CSS (Basamaklı Stil Sayfaları) ile tanımlanmalıdır. CSS ile arka plan rengini hiç ayarlamadıysanız, bu yöntemi denemeden önce düz bir arka plan rengi ayarlama ile ilgili bölümü okuyun.
2. Mülkü ekleyin animasyon "vücut" öğesine. Her tarayıcı farklı kod gerektirdiğinden 2 farklı özellik eklemeniz gerekecektir.

   ! DOCTYPE html> html> head> style> body {-webkit-animation: renk değişimi 60'lar sonsuz; animasyon: renk değişimi 60'lar sonsuz; } / stil> / kafa> gövde> / gövde> / html>

   • -webkit-animasyon özellik, Chrome tabanlı tarayıcılar (Chrome, Opera, Safari) için gereklidir. animasyon diğer tüm tarayıcılar için standarttır.
   • Renk değişimi bu örnekte animasyon denen şeydir.
   • 60'lar animasyonun / geçişin süresidir (60 saniye). Bunu hem webkit hem de varsayılan sözdizimi için ayarladığınızdan emin olun.
   • sonsuz animasyonun süresiz olarak tekrarlanması gerektiğini belirtir. Renkleri döngüye almayı ve ardından son renkte durmayı tercih ederseniz, bu bölümü atlayabilirsiniz.
3. Animasyonunuza renkler ekleyin. Şimdi, arka plan renklerini ve her bir rengin sayfada ne kadar süre görülebileceğini ayarlamak için @keyframes kuralını kullanacaksınız. Yine, çeşitli tarayıcılar için birden çok kodlama eklemeniz gerekecektir.

   ! DOCTYPE html> html> head> style> body {-webkit-animation: renk değişimi 60s sonsuz; animasyon: renk değişimi 60'lar sonsuz; } @ -webkit-keyframe renk değişimi {0% {background: # 33FFF3;}% 25 {arka plan: # 78281F;}% 50 {arka plan: # 117A65;}% 75 {arka plan: # DC7633;}% 100 {arka plan: # 9B59B6;}} @keyframes renk değişimi {0% {arka plan: # 33FFF3;}% 25 {arka plan: # 78281F;}% 50 {arka plan: # 117A65;}% 75 {arka plan: # DC7633;}% 100 {arka plan: # 9B59B6;}} / style> / head> body> / body> / html>

   • İki satırın (@ -webkit-anahtar kareler ve @keyframes arka plan renkleri ve yüzdeleri için aynı değerlere sahiptir. Deneyimin tüm tarayıcılarda aynı kalması için tek tip kalmalıdır.
   • Yüzdeler (0%, 25%, vb.) animasyonun toplam süresini temsil eder (60'lar). Sayfa yüklendiğinde, arka plan rengi şu şekilde ayarlanacaktır: 0% ve (# 33FFF3). Animasyonun% 25'i veya 60 saniyesi oynatıldığında, arka plan, # 78281F, ve benzeri.
   • Süreyi ve renkleri istediğiniz gibi ayarlayabilirsiniz.