CSS Podcast'i - 053: Arka plan 'nı inceleyin.
Arka planlar
Her CSS kutusunun arkasında, arka plan katmanı adı verilen özel bir katman bulunur. CSS, anlamlı değişiklikler yapmak için (birden fazla arka plana izin vermek gibi) çeşitli yollar sunar.
Arka plan katmanları, kullanıcıdan en uzak olduğu yerdedir ve padding-box
bölgesinden başlayarak bir kutunun içeriğinin arkasında oluşturulur. Bu, arka plan katmanının kenarlıklarla çakışmamasını sağlar.
Arka plan rengi
Bir arka plan katmanına uygulayabileceğiniz en basit efektlerden biri rengi ayarlamaktır. background-color
öğesinin ilk değeri transparent
, bu değer, bir üst öğenin içeriğinin görünür olmasını sağlar. Bir arka plan katmanında ayarlanmış geçerli bir renk, söz konusu öğe üzerine boyanmış diğer öğelerin arkasında bulunur.
Arka plan resimleri
background-color
katmanının en üstüne, background-image
özelliğini kullanarak bir arka plan resmi ekleyebilirsiniz. background-image
şunları kabul eder:
url
CSS işlevini kullanan bir resim URL'si veya veri URI'si.- Gradyan CSS işlevi tarafından dinamik olarak oluşturulan bir resim.
url
CSS işleviyle arka plan resmi ayarlama
CSS gradyanı arka planları
İki veya daha fazla renk geçirildiğinde arka plan resmi oluşturmanıza olanak tanıyan çeşitli gradyan CSS işlevleri mevcuttur.
Hangi gradyan işlevinin kullanıldığına bakılmaksızın, elde edilen resim, kullanılabilir alan miktarına uyacak şekilde doğal olarak boyutlandırılır.
Gradyan işlevlerini kullanarak arka plan resmi uygulama örneğini gösteren demo:
Yinelenen arka plan resimleri
Varsayılan olarak, arka plan resimleri arka plan katmanının tüm alanını doldurmak için yatay ve dikey olarak tekrarlanır.
Bu değeri, background-repeat
özelliğini aşağıdaki değerlerden biriyle kullanarak değiştirin:
repeat
: Resim, kullanılabilir alan içinde tekrarlanır ve gerektiğinde kırpılır.round
: Resim, kullanılabilir alana mümkün olduğunca fazla örnek sığdırmak için yatay ve dikey olarak tekrarlanır. Kullanılabilir alan arttıkça resim genişler ve resmin orijinal genişliğinin yarısı uzatıldıktan sonra daha fazla resim örneği eklemek için sıkıştırılır.space
: Resim, kırpmadan mevcut alana mümkün olduğunca fazla sayıda örneğin sığması için yatay ve dikey olarak tekrarlanır. Bu sayede, resmin örnekleri gereken şekilde boşluk bırakılır. Tekrarlanan resimler, bir arka plan katmanının kapladığı alanın kenarlarına dokunur ve beyaz alan aralarında eşit olarak dağıtılır.
background-repeat
özelliği, x ve y ekseni için davranışı bağımsız olarak ayarlamanıza olanak tanır. İlk parametre yatay tekrar davranışını, ikinci parametre ise dikey tekrar davranışını ayarlar.
Tek bir değer kullanırsanız bu değer hem yatay hem de dikey tekrarlara uygulanır.
Kısa açıklama, amacınızı daha iyi anlamanızı sağlayacak tek kelimelik pratik seçenekler de sunar.
repeat-x
değeri bir resmi yalnızca yatay olarak tekrarlar; bu, repeat no-repeat
ile eşdeğerdir.
Aşağıdaki demoda, background-repeat
mülkünün şu özellikleri gösterilmektedir:
Arka plan konumu
Web'deki bazı görüntülerin stil özellikleri background-repeat: no-repeat
bildirimiyle değiştirildiğinde, bu tür görüntülerin kapsayıcılarının sol üst kısmında görüntülendiğini fark etmiş olabilirsiniz.
Arka plan resimlerinin ilk konumu sol üsttedir. background-position
özelliği, resim konumunu ayarlayarak bu davranışı değiştirmenize olanak tanır.
background-repeat
öğesinde olduğu gibi, background-position
özelliği de resimleri x ve y ekseni boyunca varsayılan olarak iki değerle bağımsız olarak konumlandırmanıza olanak tanır.
CSS uzunlukları ve yüzdeleri kullanıldığında, ilk parametre yatay eksene, ikinci parametre ise dikey eksene karşılık gelir.
Anahtar kelimeler yalnızca anahtar kelimelerin kullanılma sırası önemli değildir:
background-position: left 50%;
background-position: top left;
background-position: left top;
background-position: 50% left;
background-position: left right;
background-position
özelliği ayrıca tek değerli bir kısaltmaya sahiptir: atlanan değer 50%
değerine çözümlenir. background-position
mülkünün kabul ettiği anahtar kelimeleri kullanarak bunu gösteren bir örneği aşağıda bulabilirsiniz:
Varsayılan iki parametre biçimine ve bir parametre biçimine ek olarak; background-position
mülkü de en fazla dört parametreyi kabul eder;
Üç veya dört parametre kullanıldığında, tarayıcının, ofsetin CSS kutusunun hangi kenarından kaynaklanması gerektiğini hesaplayabilmesi için bir CSS uzunluğu veya yüzdesinin önüne top
, left
, right
veya bottom
anahtar kelimeleri eklenmelidir.
Üç parametre kullanıldığında, bir CSS uzunluğu veya değeri ikinci veya üçüncü parametre, diğer ikisi anahtar kelime olabilir; başarılı olduğu anahtar kelime, CSS uzunluğunun veya değerinin ofseti olduğuna karşılık gelen kenarı belirlemek için kullanılır. Belirtilen diğer anahtar kelimenin uzaklığı 0 olarak ayarlanır.
background-position: bottom 88% right;
background-position: right bottom 88%;
background-position: 88% bottom right;
background-position: bottom 88% right 33%;
background-position: right 33% bottom 88%;
background-position: 88% 33% bottom left;
Bir CSS arka plan resmine background-position: top left 20%
uygulanırsa resim kutunun üst kısmına yerleştirilirse 20%
değeri, kutunun solundan (x ekseninde) %20'lik bir ofseti temsil eder.
Bir CSS arka plan resmine background-position: top 20% left
uygulanırsa% 20 değeri, CSS kutusunun üst kısmından (y ekseninde) %20'lik bir ofseti temsil eder ve resim, kutunun sol tarafına yerleştirilir.
Dört parametre kullanıldığında, iki anahtar kelime belirtilen her bir anahtar kelimenin kaynağına göre bir ofsete karşılık gelen iki değerle eşleştirilir. Bir arka plan resmine background-position: bottom 20% right 30%
uygulanırsa arka plan resmi alttan% 20, CSS kutusunun sağ tarafından% 30 oranında konumlandırılır.
Aşağıdaki demoda bu davranış gösterilmektedir:
Aşağıda, CSS ve anahtar kelime değerlerinin bir karışımını kullanarak background-position
özelliğinin kullanımına ilişkin diğer örnekler verilmiştir:
Arka Plan Boyutu
background-size
özelliği, arka plan resimlerinin boyutunu ayarlar; Varsayılan olarak, arka plan resimleri doğal (gerçek) genişlik, yükseklik ve en boy oranlarına göre boyutlandırılır.
background-size
özelliği, CSS uzunluk ve yüzde değerlerini veya belirli anahtar kelimeleri kullanır. Mülk, bir arka planın genişliğini ve yüksekliğini bağımsız olarak değiştirmenize olanak tanıyan en fazla iki parametreyi kabul eder.
background-size
mülkü aşağıdaki anahtar kelimeleri kabul eder:
auto
: Bağımsız olarak kullanıldığında, arka plan resmi doğal genişliği ve yüksekliğine göre boyutlandırılır;auto
, genişlik (ilk parametre) veya yükseklik (ikinci parametre) için başka bir CSS değeriyle birlikte kullanıldığında,auto
olarak ayarlanan boyut, resmin doğal en boy oranını korumak için gereken şekilde boyutlandırılır. Bu,background-size
özelliğinin varsayılan davranışıdır.cover
: Arka plan katmanının tüm alanını kapsar. Bu durum, resmin uzatıldığı veya kırpıldığı anlamına gelebilir.contain
: Resim, uzatmadan veya kırpmadan, alanı dolduracak şekilde boyutlandırılır. Bunun sonucunda,background-repeat
,no-repeat
değerine ayarlanmadığı sürece, resmin tekrarlanmasına neden olacak boş alan kalabilir.
İkincisi ise başka bir parametre olmadan bağımsız bir şekilde kullanılmak üzere tasarlanmıştır.
Aşağıdaki demoda bu anahtar kelimeler uygulamalı olarak gösterilmiştir:
Bu anahtar kelimelerin background-size
projesine uygulanmasını gösteren demo:
Arka plan eki
background-attachment
özelliği, arka plan resimlerinin (bir arka plan katmanının parçası olan resimler) sabit konum davranışını, katman ekranda görünür hale geldikten sonra değiştirmenize olanak tanır.
3 anahtar kelime kabul ediyor: scroll
, fixed
ve local
.
background-attachment
özelliğinin varsayılan davranışı, scroll
özelliğinin ilk değeridir. Daha fazla alan gerektiğinde, resimler bu alanla CSS kutusunun sınırları tarafından belirlenen arka plan katmanında hareket eder.
fixed
değerini kullanmak, arka plan resimlerinin konumunu görüntü alanına sabitler.
Arka plan katmanı resimlerinin alanı orijinal olarak ekran dışında kaydırıldıktan (veya oluşturulduktan) sonra, arka plan katmanında bulunan resimler, arka plan katmanının etkinleştirdiği orijinal konumlarında sabit kalır ve tüm katmanın görüntü alanı tarafından ekrandan kaydırılması sağlanır.
local
anahtar kelimesi, arka plan resimlerinin konumunun öğenin içeriğine göre sabitlenmesini sağlar. Arka plan resimleri artık CSS kutusunun sınırlarının içinde ve dışında kapladıkları alan boyunca (genellikle kaydırma, 2D veya 3D dönüşümlerinden dolayı) hareket ediyor.
Arka plan kaynağı
background-origin
özelliği, belirli bir kutuyla ilişkilendirilmiş arka plan alanını değiştirmenize olanak tanır. Mülkün kabul ettiği değerler , bir kutunun border-box
, padding-box
ve content-box
bölgelerine karşılık gelir .
Aşağıdaki demoyu kullanarak bu seçenekleri deneyebilirsiniz:
Arka plan klibi
background-clip
özelliği, background-origin
özelliği tarafından oluşturulan sınırlardan bağımsız olarak, arka plan katmanında görsel olarak nelerin gösterileceğini kontrol eder.
background-origin
gibi, belirtilebilecek bölgeler, CSS arka plan katmanının oluşturulabileceği yere karşılık gelen border-box
, padding-box
ve content-box
şeklindedir. Bu anahtar kelimeler kullanıldığında, belirtilen bölgenin dışındaki arka plan oluşturma işlemleri kırpılır veya kırpılır.
background-clip
özelliği, arka planı içerik kutusundaki metinden daha uzakta olmayacak şekilde kırpan bir text
anahtar kelimesini de kabul eder. Bu etkinin CSS kutusundaki gerçek metinde görülebilmesi için metnin kısmen veya tamamen şeffaf olması gerekir.
Nispeten yeni bir özellik olarak, bu yazının yazıldığı sırada Chrome ve çoğu tarayıcı, bu özelliği kullanmak için -webkit-
önekini gerektirmektedir.
ziyaret edin.
Birden fazla arka plan
Modülün başında belirtildiği gibi, arka plan katmanı birden çok alt katmanın tanımlanmasına olanak tanır. Bu alt katmanlardan kısaltmaları için arka plan olarak bahsedeceğim.
Birden çok arka plan yukarıdan aşağıya doğru tanımlanır; İlk arka plan, kullanıcıya en yakın olanı, son arka plan ise kullanıcıdan en uzak olanıdır.
Tanımlanan tek arka plan veya son katman, tarayıcı tarafından son arka plan katmanı olarak belirlenir. Yalnızca bu katmanın background-color
atamasına izin verilir.
Aşağıdaki kod snippet'i ve canlı demoda gösterildiği gibi, birden çok katman, arka planla ilgili çoğu CSS özelliği kullanılarak virgülle ayrılmış şekilde ayrı ayrı yapılandırılabilir.
background-image: url("https://assets.codepen.io/7518/pngaaa.com-1272986.png"),
url("https://assets.codepen.io/7518/blob.svg"),
linear-gradient(hsl(191deg, 40%, 86%), hsla(191deg, 96%, 96%, 0.5));
background-size: contain, cover, auto;
background-repeat: no-repeat, no-repeat, no-repeat;
background-position: 50% 50%, 10% 50%, 0% 0%;
background-origin: padding-box, border-box, content-box;
Arka plan kısaltması
Özellikle birden çok arka plan katmanı isteniyorsa, bir kutunun arka plan katmanının stil özelliklerini ayarlamayı kolaylaştırmak için, aşağıdaki belirli deseni izleyen bir kısaltma kullanılır:
background:
<background-image>
<background-position> / <background-size>?
<background-repeat>
<background-attachment>
<background-origin>
<background-clip>
<background-color>?
Birden fazla arka planın belirtilmesinde sıralama önemlidir. Hem konum hem de boyut değerleri eğik çizgiyle (/
) ayrılmış olarak sağlanmalıdır. Kaynak ve klip davranışının doğru sırada tanımlanması, her ikisi için de aynı anda geçerli olacak anahtar kelimeler belirlemenin avantajlarından yararlanmanıza olanak tanır.
Aşağıdaki beyan, arka planı kırpar ve içerik kutusundan oluşturur:
background: url("https://assets.codepen.io/7518/blob.svg") 50%
50% / contain no-repeat content-box;
Bu kısaltmalı anlamlar göz önünde bulundurularak, kod snippet'inin arka planla ilgili önceki bildirimleri aşağıdaki şekilde yeniden yazılabilir:
background: url("https://assets.codepen.io/7518/pngaaa.com-1272986.png") 50% 50%/contain no-repeat padding-box, url("https://assets.codepen.io/7518/blob.svg") 10% 50% / cover border-box, linear-gradient(hsl(191deg, 40%, 86%), hsla(191deg, 96%, 96%, 0.5) ) 0% 0% / cover no-repeat content-box ;
Öğrendiklerinizi sınayın
CSS Arka Planları hakkındaki bilginizi test edin
Arka plan resimleri, CSS kutusunun sol üst tarafına yerleştirilir.
background-position
özelliğinin açıkça kullanılması gerekir.
Arka plan resimleri varsayılan olarak tekrarlanmaz.
background-repeat: no-repeat
, bir arka plan resmini tekrar etmemek için açıkça kullanılmalıdır. Buna ek olarak, belirli eksende tekrarı önlemek için background-repeat: repeat-x
ve background-repeat: repeat-y
kullanılabilir.
Aşağıdaki background-position
beyanlarından hangileri geçerlidir?
background-position: 50% left
background-position: top right 33%
background-position: right bottom
background-position: left
Kullandığınız bir görüntü alanı içinde sabitlenecek bir arka plan resmini ayarlamak için:
background-position: fixed
background-position
özelliği için geçersiz bir değerdir."
background-fixed-to-viewport: true
background-fixed-to-viewport
henüz CSS'de yer almıyor.
background-attachment: fixed
background-attachment: fixed
, arka plan resmini geçerli görüntü alanı içinde sabitlenecek şekilde açıkça ayarlar.
background-attachment: scroll
background-attachment
, görüntü alanı içinde sabitlenecek bir arka plan resmi ayarlamak için kullanılan özelliktir; Ancak scroll
, arka plan resmini varsayılan olarak kutu içindeki içerikten etkilenmeyen kutuya sabitleyen özelliğin varsayılan değeridir.
CSS kutusu içindeki bir arka planın varsayılan arka plan kaynağı:
content-box
background-origin
için geçerli ancak varsayılan değer değil.
border-box
background-origin
için geçerli olan bu değer ve önceden düzenlenmiş kenarlıkları arka planın üzerine boyanabilir, ancak varsayılan değildir.
padding-box
background-origin
için varsayılan değerdir. Arka planın, içeriğin ötesinde ve bir kutunun kenarlığına kadar oluşturulmasına olanak tanır.
margin-box
background-origin
özelliği için geçersiz bir değerdir.