Web Tasarımlarınızı Canlandırmak için 7 CSS Arka Plan Özelliği

Web sitenizin arka plan teması, görünümünü ve verdiği hissi önemli ölçüde etkileyebilir. Renkler, resimler ve arka plan desenleri duygu uyandırır ve harika kullanıcı deneyimleri yaratır.

HTML öğelerinin arka plan stilini ayarlamak için CSS arka plan özelliklerini kullanabilirsiniz. Mükemmel arka planlar oluşturmak için kullanabileceğiniz bazı CSS özellikleri hakkında her şeyi öğrenin.

1. arka plan rengi

bu arka plan rengi özelliği Bir öğenin arka planının rengini ayarlar. Rengi "kırmızı" gibi bir ad, "#00FF00" gibi bir HEX değeri veya "rgb (0, 255, 0)" gibi bir RGB değeri kullanarak ayarlayabilirsiniz. Ton, doygunluk ve açıklığı kullanarak arka plan rengini ayarlamak için bir HSL değeri de kullanabilirsiniz.

Aşağıdaki örnek, tüm sayfanın arka plan rengini turuncu olarak ayarlar. Başlık öğelerinin her biri farklı bir arka plana sahiptir.

<vücut>
<h2>ben yeşilimh2>
<h3>ben kırmızıyımh3>
<h4>Ben maviyimh4>
vücut>

CSS kullanarak her öğeye benzersiz bir arka plan rengi uygulayabilirsiniz:

vücut {
arka plan rengi: turuncu;
}
h2 {
arka plan rengi: #006600;
}
h3 {
arka plan rengi: rgb(128, 0, 0);
}
h4{
arka plan rengi: hsl(240, 100%, 50%);
}

Bu, sayfanın şöyle görünmesi için stil oluşturacaktır:

Bir öğenin saydamlığını belirlemek için opaklık özelliğini kullanabilirsiniz. Opaklık 0.0 ile 1.0 arasında değerler alır. Değer ne kadar düşükse öğe o kadar şeffaftır.

Örnek olarak, bir gövde öğesinin opaklığını 0,5 olarak ayarlamayı deneyin:

vücut {
arka plan rengi:turuncu;
opaklık:0.5;
}

Bu, aşağıdaki gibi görüntülenecektir—renkleri önceki ekran görüntüsündekilerle karşılaştırın:

2. arka plan görüntüsü

background-image özelliği, bir görüntüyü bir öğenin arka planı olarak ayarlar. Yerel bir resme veya internetten bir resme başvurabilirsiniz.

<vücut>
 <h1>MerhabaOrası!h1>
 <P>BENsahip olmakBİRgörüntüiçindeBenimarka plan!P>
vücut>

CSS dosyası:

vücut {
arka plan görüntüsü:url("https://Görüntüler.pexels.com/fotoğraflar/1191710/pexels-fotoğraf-1191710.jpeg?Oto=kompres&cs=miniksrgb&w=1260&H=750&dpr=1");
}

Bu, şöyle görüntülenecektir:

Ayrıca kullanabilirsin arka plan degradeleri uygulamanız için benzersiz bir görünüm oluşturmak için.

3. arka plan tekrarı

background-image özelliği, varsayılan olarak görüntüleri tekrarlar. Görüntüyü x ekseninde yatay olarak veya y ekseninde dikey olarak tekrarlamayı seçebilirsiniz.

Alternatif olarak, bir tekrar tarzınıza uymuyorsa, değeri kullanarak onu kaldırabilirsiniz. tekrarsız.

<vücut>
<h1>Selamlar!h1>
<h3>x ekseninde tekrar arkaplan-tekrar özelliğini gösteriyorum!h3>
vücut>

X ekseni boyunca yinelenen bir arka plan uygulamak için aşağıdaki CSS'yi kullanın:

vücut {
arka plan görüntüsü: url("https://Görüntüler.pexels.com/fotoğraflar/459335/pexels-fotoğraf-459335.jpeg?Oto=kompres&cs=miniksrgb&w=1260&H=750&dpr=1");
arka plan tekrarı: tekrar-x;
}

Sonuç:

Ardından, görüntüyü y ekseninde tekrarlamayı deneyin:

vücut {
arka plan görüntüsü:url("https://cdn.pixabay.com/Fotoğraf/2016/04/18/22/05/deniz kabukları-1337565__340.jpg");
arka plan tekrarı: tekrar-y;
}

Sonuç:

Y eksenindeki örnek kesinlikle bozuk görünüyor. Aradığınız modeller bunlar değilse belirtebilirsiniz. tekrarsız yerine:

vücut {
arka plan görüntüsü:url("https://Görüntüler.pexels.com/fotoğraflar/259915/pexels-fotoğraf-259915.jpeg?Oto=kompres&cs=miniksrgb&w=600");
arka plan tekrarı: tekrar yok;
}

Sonuç:

4. arka plan pozisyonu

background-position özelliği, arka plan görüntüsünün öğesi içindeki konumunu tanımlar. gibi konuma özgü anahtar kelimeler kullanır. merkez, tepe, Ve altveya bir piksel veya yüzde değeri.

Son resme bir arka plan konumu özelliği ekleyin:

vücut {
arka plan görüntüsü: url("https://Görüntüler.pexels.com/fotoğraflar/259915/pexels-fotoğraf-259915.jpeg?Oto=kompres&cs=miniksrgb&w=600");
arka plan pozisyonu: tepemerkez;
}

Bunun gibi görünecek:

Görüntünün web sitesinin görünümünü bozduğunu görebilirsiniz. Bunu bir sonraki özellik ile düzeltelim.

5. arka plan boyutu

Görüntü için belirli bir boyut tanımlamak üzere arka plan görüntüsü özelliğini kullanabilirsiniz. gibi anahtar kelimeler kullanır. kapak Ve içermek veya bir piksel veya yüzde değeri. Bir background-size özelliği ekleyerek bozuk arka plan görüntüsünü düzeltelim.

vücut {
 arka plan resmi: url(" https://images.pexels.com/photos/259915/pexels-photo-259915.jpeg? auto=compress&cs=tinysrgb&w=600");
 arka plan tekrarı: tekrar yok;
 arka plan konumu: merkez;

Sonuç, görüntünün artık web sayfasını orantılı olarak kapladığını gösterir.

6. arka plan eki

background-attachment özelliği, arka plan resmi konumunun sabit mi kalacağını yoksa kaydırılacağını mı tanımlar. Sabit veya kaydırma anahtar kelimelerini kullanabilirsiniz.

Bunu aşağıdaki kodda gösterelim:

<vücut>
<h1>arka plan eki özelliğih1>
<P>Sabit ek özelliği ile arka planın metinle birlikte hareket etmediğini fark edeceksiniz.P>
<P>Sabit ek özelliği ile arka planın metinle birlikte hareket etmediğini fark edeceksiniz.P>
<P>Sabit ek özelliği ile arka planın metinle birlikte hareket etmediğini fark edeceksiniz.P>
<P>Sabit ek özelliği ile arka planın metinle birlikte hareket etmediğini fark edeceksiniz.P>
<P>Sabit ek özelliği ile arka planın metinle birlikte hareket etmediğini fark edeceksiniz.P>
<P>Sabit ek özelliği ile arka planın metinle birlikte hareket etmediğini fark edeceksiniz.P>
<P>Sabit ek özelliği ile arka planın metinle birlikte hareket etmediğini fark edeceksiniz.P>
<P>Sabit ek özelliği ile arka planın metinle birlikte hareket etmediğini fark edeceksiniz.P>
<P>Sabit ek özelliği ile arka planın metinle birlikte hareket etmediğini fark edeceksiniz.P>
<P>Sabit ek özelliği ile arka planın metinle birlikte hareket etmediğini fark edeceksiniz.P>
<P>Sabit ek özelliği ile arka planın metinle birlikte hareket etmediğini fark edeceksiniz.P>
<P>Sabit ek özelliği ile arka planın metinle birlikte hareket etmediğini fark edeceksiniz.P>
vücut>

CSS dosyası:

vücut {
arka plan görüntüsü: url("https://Görüntüler.pexels.com/fotoğraflar/96627/pexels-fotoğraf-96627.jpeg?Oto=kompres&cs=miniksrgb&w=600");
arka plan tekrarı: tekrarsız;
arka plan pozisyonu: merkez;
arka plan boyutu: kapak;
arka plan eki: sabit;
}

Sayfayı aşağı kaydırırsanız, arka planın hareket etmediğini fark edeceksiniz:

Scroll background-attachment özelliğini göstermek için anahtar kelimeyi şu şekilde değiştirin: taslak. Artık arka planın metinle birlikte hareket ettiğini fark edeceksiniz.

vücut {
arka plan görüntüsü: url("https://Görüntüler.pexels.com/fotoğraflar/96627/pexels-fotoğraf-96627.jpeg?Oto=kompres&cs=miniksrgb&w=600");
arka plan tekrarı: tekrarsız;
arka plan pozisyonu: merkez;
arka plan boyutu: kapak;
arka plan eki: taslak;
}

7. arka plan Steno Özelliği

Mükemmel arka planı elde etmek için birkaç özellik eklemeniz gerektiğini fark edebilirsiniz. Bu, çok sayıda kod yazmayı içerir. Ancak, arka plan kısayol özelliğini kullanarak kodu kısaltabilirsiniz.

Shorthand özelliği, birçok arka plan özelliğini tek bir satırda ayarlamanıza olanak tanır. anahtar kelimeyi kullanıyorsun arka plan kısayol özelliğini ayarlamak için.

Örneğin, şöyle bir kod yazmak yerine:

vücut {
arka plan rengi: yeşil;
arka plan görüntüsü: url("dizüstü3.jpg");
arka plan tekrarı: tekrarsız;
arka plan boyutu: kapak;
arka plan eki: taslak;
arka plan pozisyonu: merkez;
}

Bunun gibi tek bir satırda yazabilirsiniz:

vücut {
arka plan: yeşilurl("dizüstü3.jpg") tekrarsızkapaktaslakmerkez;
}

Shorthand özelliği belirli bir sırayı takip eder. Bir veya daha fazlası eksik olsa bile özellikleri bu sırayla hizalamalısınız. Sipariş:

• arka plan rengi
• arka plan görüntüsü
• arka plan tekrarı
• arka plan eki
• arka plan pozisyonu

Çeşitli kullanarak CSS ile ilginç tasarımlar oluşturabilirsiniz. arka plan desenleri. Bu kalıplarla web siteniz için benzersiz ve seçkin arka planlar elde edebilirsiniz.

CSS'deki Diğer Arka Plan Özellikleri

CSS güçlüdür ve uygulamanızı renklendirmek için onunla yapabileceğiniz çok şey vardır. Biraz animasyon eklemek için background-clip, background-origin ve background-blend-modu gibi özellikleri kullanabilirsiniz.

Sayfalarınızı özelleştirmek için degradeleri ve desenleri de kullanabilirsiniz. Web tasarım becerilerinizi geliştirmek için CSS arka plan özellikleriyle denemeler yapın.