CSS Çoklu Arka Planları
Bu bölümde, bir öğeye birden çok arka plan görüntüsünü nasıl ekleyeceğinizi öğreneceksiniz.
Ayrıca aşağıdaki özellikler hakkında bilgi edineceksiniz:
background-sizebackground-originbackground-clip
CSS Çoklu Arka Planları
background-imageCSS, özellik aracılığıyla bir öğe için birden çok arka plan görüntüsü eklemenize olanak tanır
.
Farklı arka plan görüntüleri virgülle ayrılır ve görüntüler, ilk görüntünün izleyiciye en yakın olduğu yerde üst üste yığılır.
Aşağıdaki örnekte iki arka plan resmi vardır, ilk resim bir çiçektir (alt ve sağa hizalanmış) ve ikinci resim kağıt arka plandır (sol üst köşeye hizalanmış):
Örnek
#example1 {
background-image: url(img_flwr.gif), url(paper.gif);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
}
Bireysel arka plan özellikleri (yukarıdaki gibi) veya backgroundstenografi özelliği kullanılarak birden çok arka plan görüntüsü belirtilebilir.
Aşağıdaki örnek, backgroundsteno özelliğini kullanır (yukarıdaki örnekle aynı sonuç):
Örnek
#example1 {
background: url(img_flwr.gif) right bottom
no-repeat, url(paper.gif) left top repeat;
}
CSS Arka Plan Boyutu
CSS background-sizeözelliği, arka plan görüntülerinin boyutunu belirlemenize olanak tanır.
Boyut, uzunluklar, yüzdeler veya iki anahtar kelimeden biri kullanılarak belirtilebilir: içerme veya kaplama.
Aşağıdaki örnek, bir arka plan görüntüsünü orijinal görüntüden çok daha küçük olacak şekilde yeniden boyutlandırır (piksel kullanarak):
Ağrı için O'na Teşekkür Edin
Acının kendisi aşktır
Bu yüzden, normal uygulamamızın sonuçlardan yararlanmak için katlandıkları en ufak bir şey geliyor.
İşte kod:
Örnek
#div1
{
background: url(img_flower.jpg);
background-size: 100px 80px;
background-repeat: no-repeat;
}
background-sizeiçin diğer iki olası değer contain
ve cover.
Anahtar containsözcük, arka plan görüntüsünü olabildiğince büyük olacak şekilde ölçeklendirir (ancak hem genişliği hem de yüksekliği içerik alanına sığmalıdır). Bu nedenle, arka plan görüntüsünün ve arka plan konumlandırma alanının oranlarına bağlı olarak, arka plan görüntüsünün kapsamadığı bazı arka plan alanları olabilir.
Anahtar coversözcük, arka plan görüntüsünü, içerik alanı arka plan görüntüsü tarafından tamamen kaplanacak şekilde ölçekler (hem genişliği hem de yüksekliği içerik alanına eşittir veya ondan daha fazladır). Bu nedenle, arka plan görüntüsünün bazı bölümleri arka plan konumlandırma alanında görünmeyebilir.
Aşağıdaki örnek ve kullanımını containgösterir cover:
Örnek
#div1
{
background: url(img_flower.jpg);
background-size: contain;
background-repeat: no-repeat;
}
#div2
{
background: url(img_flower.jpg);
background-size: cover;
background-repeat: no-repeat;
}
Birden Fazla Arka Plan Resminin Boyutlarını Tanımlayın
Özellik background-sizeayrıca, birden çok arka planla çalışırken arka plan boyutu için birden çok değeri (virgülle ayrılmış bir liste kullanarak) kabul eder.
Aşağıdaki örnekte, her görüntü için farklı arka plan boyutu değeriyle belirtilen üç arka plan görüntüsü vardır:
Örnek
#example1 {
background: url(img_tree.gif) left top
no-repeat, url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top
repeat;
background-size: 50px, 130px, auto;
}
Tam Boy Arka Plan Resmi
Şimdi, bir web sitesinde her zaman tüm tarayıcı penceresini kapsayan bir arka plan resmine sahip olmak istiyoruz.
Gereksinimler aşağıdaki gibidir:
- Tüm sayfayı resimle doldurun (boşluk yok)
- Resmi gerektiği gibi ölçeklendirin
- Sayfadaki resmi ortala
- Kaydırma çubuklarına neden olma
Aşağıdaki örnek, nasıl yapılacağını gösterir; <html> öğesini kullanın (<html> öğesi her zaman en az tarayıcı penceresinin yüksekliğindedir). Ardından üzerine sabit ve ortalanmış bir arka plan ayarlayın. Ardından, arka plan boyutu özelliğiyle boyutunu ayarlayın:
Örnek
html {
background: url(img_man.jpg) no-repeat
center fixed;
background-size: cover;
}
Kahraman Resmi
Bir kahraman görüntüsü (metin içeren büyük bir görüntü) oluşturmak ve onu istediğiniz yere yerleştirmek için bir <div> üzerinde farklı arka plan özelliklerini de kullanabilirsiniz.
Örnek
.hero-image {
background: url(img_man.jpg) no-repeat center;
background-size: cover;
height: 500px;
position:
relative;
}
CSS arka plan kökenli Özellik
CSS background-originözelliği, arka plan görüntüsünün nereye yerleştirileceğini belirtir.
Özellik üç farklı değer alır:
- border-box - arka plan resmi, sınırın sol üst köşesinden başlar
- padding-box - (varsayılan) arka plan resmi, dolgu kenarının sol üst köşesinden başlar
- içerik kutusu - arka plan resmi içeriğin sol üst köşesinden başlar
Aşağıdaki örnek background-originözelliği göstermektedir:
Örnek
#example1
{
border: 10px solid black;
padding: 35px;
background: url(img_flwr.gif);
background-repeat: no-repeat;
background-origin: content-box;
}
CSS arka plan klibi Özellik
CSS background-clipözelliği, arka planın boyama alanını belirtir.
Özellik üç farklı değer alır:
- border-box - (varsayılan) arka plan, sınırın dış kenarına boyanır
- dolgu kutusu - arka plan dolgunun dış kenarına boyanır
- içerik kutusu - arka plan içerik kutusunun içinde boyanır
Aşağıdaki örnek background-clipözelliği göstermektedir:
Örnek
#example1
{
border: 10px dotted black;
padding: 35px;
background: yellow;
background-clip: content-box;
}
CSS Gelişmiş Arka Plan Özellikleri
| Property | Description |
|---|---|
| background | A shorthand property for setting all the background properties in one declaration |
| background-clip | Specifies the painting area of the background |
| background-image | Specifies one or more background images for an element |
| background-origin | Specifies where the background image(s) is/are positioned |
| background-size | Specifies the size of the background image(s) |