Zemin özellikleri elemanları için arka plan etkilerini tanımlamak için kullanılır.
CSS arkaplan özellikleri:
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
Arka plan rengi
background-color özelliği bir elemanın arka plan rengini belirler.
Bir sayfanın arka plan rengi böyle ayarlanır:
CSS ile, bir renk genellikle belirtilir:
- gibi - geçerli bir renk adı "red"
- gibi - bir HEX değeri "#ff0000"
- gibi - bir RGB değeri " rgb(255,0,0) "
Bak CSS Renk Değerleri olası renk değerlerinin tam listesi için.
Aşağıdaki örnekte, <h1>, <p> ve <div> elemanlar farklı arka plan renkleri vardır:
Örnek
h1 {
background-color: green;
}
div {
background-color: lightblue;
}
p {
background-color:
yellow;
} Kendin dene " Arka plan görüntüsü
background-image özelliği bir elemanın arka plan olarak kullanmak üzere bir görüntü belirtir.
o elemanın tamamını kapsar Varsayılan olarak, görüntü tekrarlanır.
Bir sayfa için arka plan görüntüsü böyle ayarlanabilir:
Aşağıda metin ve arka plan görüntüsü kötü bir kombinasyonun bir örnektir. Metin pek okunabilir:
Note: Bir arka plan resmi kullanırken, metin rahatsız etmez resmini kullanın.
Arka Plan Resmi - Yatay veya Dikey tekrarla
Varsayılan olarak, background-image özelliği hem yatay hem de dikey bir görüntü tekrarlar.
Bazı resimler sadece yatay veya dikey olarak tekrarlanmalıdır, ya da bunun gibi, garip görünecektir:
Görüntü yukarıdaki yalnızca yatay tekrarlanırsa ( background-repeat: repeat-x; ) , arka plan daha iyi görünecektir:
Note: bir görüntü dikey olarak kurulmuştur tekrarlamak için background-repeat: repeat-y;
Arka Plan Resmi - Set pozisyonu ve yineleme yok
Sadece bir kez de belirtilir arka plan görüntüsünü Gösterilen background-repeat özelliği:
Yukarıdaki örnekte, arka plan görüntüsü metin olarak aynı yerde gösterilmektedir. Biz çok fazla metin rahatsız etmeyecek şekilde, resmin konumunu değiştirmek istiyorum.
Görüntü konumu ile belirtilen background-position özelliği:
Örnek
body
{
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
}
Kendin dene " Arka Plan Resmi - Sabit pozisyon
Arka plan resmi sabit gerektiğini belirtmek için (will not scroll with the rest of the page) , kullanmak background-attachment özelliği:
Örnek
body
{
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
background-attachment: fixed;
}
Kendin dene " Arka plan - Steno özelliği
kodunu kısaltmak için, tek bir araçta tüm arka plan özelliklerini belirlemek de mümkündür. Bu stenografi özelliği denir.
Arka plan için stenografi özelliği olan background :
stenografi özelliğini kullanırken özellik değerlerine sırası şöyledir:
-
background-color -
background-image -
background-repeat -
background-attachment -
background-position
mülkiyet değerlerinden biri diğerleri bu sırada müddetçe, yoksa önemli değil.
Egzersizleri ile Yourself test edin!
Egzersiz 1 » Alıştırma 2» Egzersiz 3 » Egzersiz 4» Egzersiz 5 »
Tüm CSS Zemin Özellikleri
| özellik | Açıklama |
|---|---|
| background | tek bildiriminde tüm arka plan özelliklerini belirler |
| background-attachment | Bir arka plan resminin sayfa geri kalanı ile sabit veya kayar olup olmadığını belirler |
| background-color | Bir elemanın arka plan rengini ayarlar |
| background-image | Bir elemanın plan görüntüsünü ayarlar |
| background-position | Bir arka plan görüntüsü başlangıç konumunu belirler |
| background-repeat | Bir arka plan görüntüsü tekrarlanacaktır nasıl belirler |