CSS ile Arka Plan Rengi Nasıl Değiştirilir

CSS ile Arka Plan Rengi Nasıl Değiştirilir

Herhangi bir tomurcuklanan ön uç geliştiricinin kariyerindeki en heyecan verici anlardan biri, bir web sayfasının arka plan rengini nasıl değiştireceğini öğrenmektir.





HTML ile çalışmak harika bir şey ama sadece birkaç satırlık CSS ile sayfalarınızı ve programlama yolculuğunuzu canlandırabilirsiniz.



Bu kılavuz, arka plan rengini CSS ile nasıl değiştireceğiniz konusunda bilmeniz gereken her şeyi kapsayacaktır.





Kurulumu Alın

Küçük bir ön çalışma yapalım.

dosya kullanımda olduğu için silinemez

Not : kullanmanızı tavsiye ederim Visual Studio Kodu ile Canlı Sunucu uzantısı HTML ve CSS'yi güncellerken değişiklikleri gerçek zamanlı olarak görüntülemek için.



  1. Projenizin dosyaları için bir klasör oluşturun.
  2. Oluşturduğunuz bir index.html HTML'nizi barındıracak dosya. Kazan plakası kodunu kullanabilir veya sadece bazılarını kurabilirsiniz. , , ve etiketler.
  3. Oluşturmak stiller.css CSS'niz için dosya.
  4. Yerleştirerek CSS dosyanızı HTML ile bağlayın içinde etiketler.

Artık CSS'yi düzenlemeye başlamaya hazırsınız.

İlgili: Bir Kazandıran Web Sitesi Nasıl Oluşturulur



CSS ile Arka Plan Rengi Nasıl Değiştirilir

Arka plan rengini değiştirmenin en basit yolu, vücut etiket. Ardından, düzenleyin arka plan rengi Emlak. Google Renk Seçici tarayıcı uzantısını arayarak ve kullanarak renk kodlarını bulabilirsiniz.

body {
background-color: rgb(191, 214, 255);
}

Bu kod, arka planı güzel bir açık maviye dönüştürür.



NS arka plan rengi özelliği renkleri altı farklı biçimde kabul eder:

  • isim : açık gök mavisi; (yakın bir tahmin için)
  • altıgen kod : #bfd6ff;
  • rgb : rgb(191, 214, 255);
  • rgba : rgba (191, 214, 255, 1); nerede ile alfa (opaklık)
  • HSL : hsl(218°, %100, %87);
  • HSLA : hsla (218°, %100, %87, 1); nerede ile alfa (opaklık)

Kısa yolu kullan arka fon mülkün yerine arka plan rengi fazladan kod kesmek için. Bu yöntemi kullanarak herhangi bir HTML öğesinin arka plan rengini değiştirebilirsiniz.

Oluşturmak öğesini seçin ve ona bir sınıf verin - bu durumda sınıf panel . Ayarla boy uzunluğu ve Genişlik CSS'deki özellikler. Öğeyi CSS'de seçin ve renklendirin.

body {
background-color: rgb(191, 214, 255);
}
.container{
display: flex;
justify-content: center;
align-items: center;
height: 90vh;
}
.panel {
background: rgb(255, 148, 148);
height: 10rem;
width: 30%;
}
.muo-text {
font-size: 3em;
font-weight: bolder;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
position: absolute;
}

Burada görebilirsiniz vücut arka fon özellik bağımsız olarak stilize edilir .panel arka fon Emlak.

background özelliği degradeleri de kabul eder:

body {
background: linear-gradient(90deg, rgba(234,233,255,1) 0%, rgba(252,167,213,1) 35%, rgba(194,245,255,1) 100%);
}

CSS'de Arka Plan Resmi Nasıl Değiştirilir

Arka planın düz bir renk veya gradyan yerine bir görüntü olmasını isterseniz ne olur? steno arka fon mal tanıdık bir arkadaştır.

Resmin HTML ve CSS dosyalarınızla aynı klasörde olduğundan emin olun. Aksi takdirde, yalnızca ad yerine parantez içindeki dosya yolunu kullanmanız gerekir:

body {
background: url(leaves-and-trees.jpg)
}

Vay! Görüntü çok yakınlaştırılmış gibi görünüyor. arka plan boyutu Emlak.

body {
background: url(leaves-and-trees.jpg);
background-size: cover;
}

Kısa yolu kullanmak için arka fon mülkiyet ile bağlantılı olarak arka plan boyutu Emlak örtmek , ayrıca belirtmelisiniz arka plan konumu özellikleri ve değerleri ters eğik çizgi ile ayırın (gibi varsayılan konum değerleri olsalar bile Sol üst .)

body {
background: url(leaves-and-trees.jpg) top left / cover;
}

Buyrun! Tek bir CSS satırında uygun boyutta bir arka plan görüntüsü.

Devamını oku: CSS'de Arka Plan Resmi Nasıl Ayarlanır

Not : Çok fazla depolama alanı kaplayan büyük arka plan resimleri eklemeye dikkat edin. Bunları, kullanıcılara sayfada kalmaları için bir neden vermek için iki saniyenizin olduğu mobil cihazlarda yüklemek zor olabilir.

CSS Oyununuzu CSS kutu gölgesiyle yükseltin

Sizin gibi bir geliştirici için arka plan rengi ve arka plan görüntüsü özellikleri eski haberlerdir. Neyse ki, her zaman öğrenecek yeni bir şeyler vardır.

CSS kutu gölgesi ile kutularınızı güçlendirmeyi deneyin. HTML öğeleriniz hiç bu kadar iyi görünmemişti!

Paylaş Paylaş Cıvıldamak E-posta CSS kutu gölgesi Nasıl Kullanılır: 13 Püf Noktası ve Örnekler

Mülayim kutular sıkıcı görünüyor. Onları CSS kutu gölge efektiyle süsleyin!

Sonrakini Oku İlgili konular
  • Programlama
  • Web Geliştirme
  • Web Tasarım
  • CSS
Yazar hakkında Marcus Mears III(26 Makale Yayınlandı)

Marcus, ömür boyu teknoloji meraklısı ve MUO'da Yazar Editörüdür. Trend olan teknoloji, gadget'lar, uygulamalar ve yazılımları kapsayan serbest yazarlık kariyerine 2020'de başladı. Üniversitede Bilgisayar Bilimi okudu ve ön uç web geliştirmeye odaklandı.

Marcus Mears III'dan Daha Fazla

Haber bültenimize abone ol

Teknik ipuçları, incelemeler, ücretsiz e-kitaplar ve özel fırsatlar için bültenimize katılın!

Abone olmak için buraya tıklayın