The CSS Podcast - 053: Background
Her CSS kutusunun arkasında arka plan katmanı adı verilen özel bir katman bulunur. CSS, birden fazla arka plana izin vermek de dahil olmak üzere CSS'de anlamlı değişiklikler yapmanın çeşitli yollarını sunar.
Arka plan katmanları kullanıcıdan en uzaktadır ve padding-box
bölgesinden başlayarak bir kutunun içeriğinin arkasında oluşturulur. Bu sayede arka plan katmanı, kenarlıklarla hiç örtüşmez.
Arka plan rengi
Arka plan katmanına uygulayabileceğiniz en basit efektlerden biri rengi ayarlamaktır. background-color
değerinin ilk değeri transparent
'dur. Bu değer, üst öğenin içeriğinin görünür olmasına olanak tanır. Arka plan katmanında ayarlanan geçerli bir renk, söz konusu öğeye boyanan diğer öğelerin arkasında yer alır.
Arka plan resimleri
background-color
katmanının üzerine background-image
mülkünü kullanarak arka plan resmi ekleyebilirsiniz. background-image
aşağıdakileri kabul eder:
url
CSS işlevini kullanan bir resim URL'si veya veri URI.- Renk geçişi 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çtiğinde arka plan resmi oluşturmanıza olanak tanıyan çeşitli gradient CSS işlevleri vardır.
Hangi gradyan işlevinin kullanıldığına bakılmaksızın, ortaya çıkan resim mevcut 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:
Tekrarlanan arka plan resimleri
Arka plan resimleri varsayılan olarak arka plan katmanının tüm alanını doldurmak için yatay ve dikey olarak tekrarlanır.
background-repeat
mülkünü aşağıdaki değerlerden biriyle kullanarak bunu değiştirin:
repeat
: Resim, mevcut alanda tekrarlanır ve gerektiğinde kırpılır.round
: Resim, mevcut alana mümkün olduğunca çok sayıda örnek sığdırmak için yatay ve dikey olarak tekrarlanır. Kullanılabilir alan arttıkça resim uzar ve orijinal genişliğinin yarısına kadar uzatıldıktan sonra daha fazla resim örneği eklemek için sıkıştırılır.space
: Resim, mevcut alana kırpmadan sığacak şekilde yatay ve dikey olarak tekrarlanır. Resim örnekleri gerektiği şekilde aralıklarla yerleştirilir. Tekrarlanan resimler, arka plan katmanının kapladığı alanın kenarlarına değecek şekilde yerleştirilir ve aralarında eşit olarak dağıtılmış beyaz alan bulunur.
background-repeat
mülkü, x ve y eksenlerinin davranışını bağımsız olarak ayarlamanıza olanak tanır. İlk parametre yatay tekrar davranışını, ikinci parametre ise dikey tekrar davranışını belirler.
Tek bir değer kullanırsanız bu değer hem yatay hem de dikey tekrarlara uygulanır.
Kısaltmalarda, amacınızı daha net ifade etmenizi sağlayacak tek kelimelik seçenekler de bulunur.
repeat-x
değeri, bir resmi yalnızca yatay olarak tekrarlar ve repeat no-repeat
ile aynıdır.
Aşağıdaki demoda, background-repeat
mülkünün bu özellikleri gösterilmektedir:
Arka plan konumu
Web'deki bazı resimlerin background-repeat: no-repeat
beyanı ile biçimlendirildiğini ve bu tür resimlerin kapsayıcılarının sol üst kısmında gösterildiğini fark etmiş olabilirsiniz.
Arka plan resimlerinin ilk konumu sol üsttür. background-position
mülkü, resim konumunu kaydırarak bu davranışı değiştirmenize olanak tanır.
background-repeat
ile olduğu gibi background-position
özelliği de varsayılan olarak iki değerle resimleri x ve y ekseninde 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 kullanıldığında anahtar kelimelerin 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
mülkünün tek değerli kısaltması da vardır. Atlanan değer 50%
olarak çözülür. background-position
mülkünün kabul ettiği anahtar kelimeleri kullanarak bunu gösteren bir örnek aşağıda verilmiştir:
background-position
mülkü, varsayılan iki parametre biçimine ve bir parametre biçimine ek olarak en fazla dört parametreyi de kabul eder;
Üç veya dört parametre kullanıldığında, tarayıcının ofsetin CSS kutusunun hangi kenarından başlaması gerektiğini hesaplayabilmesi için CSS uzunluğunun veya yüzdenin önünde top
, left
, right
veya bottom
anahtar kelimelerinden biri bulunmalıdır.
Üç parametre kullanıldığında, CSS uzunluğu veya değeri ikinci ya da üçüncü parametre olabilir. Diğer ikisi anahtar kelimedir. Başarılı olan anahtar kelime, CSS uzunluğunun veya değerinin ofset olduğu kenar belirlemek için kullanılır. Belirtilen diğer anahtar kelimenin ofseti 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;
background-position: top left 20%
, CSS arka plan resmine uygulanırsa resim kutunun üst kısmına yerleştirilir. 20%
değeri, kutunun solundan (x ekseninde) %20 ofset olduğunu gösterir.
background-position: top 20% left
bir CSS arka plan resmine uygulanırsa% 20 değeri, CSS kutusunun üst kısmından (y ekseninde) %20 ofseti temsil eder ve resim kutunun soluna yerleştirilir.
Dört parametre kullanıldığında, iki anahtar kelime, belirtilen her anahtar kelimenin köklerine göre bir ofset'e karşılık gelen iki değerle eşleştirilir. background-position: bottom 20% right 30%
, background-image öğesine uygulanırsa background-image, CSS kutusunun alt kısmından% 20 ve sağ kısmından% 30 mesafeye konumlandırılır.
Aşağıdaki demoda bu davranış gösterilmektedir:
CSS ve anahtar kelime değerlerinin bir karışımını kullanarak background-position
özelliğini kullanmaya dair daha fazla örnek aşağıda verilmiştir:
Arka Plan Boyutu
background-size
mülkü, arka plan resimlerinin boyutunu belirler. Arka plan resimleri varsayılan olarak doğal (gerçek) genişliklerine, yüksekliklerine ve en boy oranlarına göre boyutlandırılır.
background-size
mülkü, CSS uzunluğu ve yüzde değerlerini ya da belirli anahtar kelimeleri kullanır. Mülk, arka planın genişliğini ve yüksekliğini bağımsız olarak değiştirmenize olanak tanıyan en fazla iki parametre 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ğine 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 gerektiği şekilde boyutlandırılır. Bu,background-size
mülkünün varsayılan davranışıdır.cover
: Arka plan katmanının tüm alanını kapsar. Bu, resmin ölçeklendirildiği veya kırpıldığı anlamına gelebilir.contain
: Resmi, uzatma veya kırpma olmadan alanı dolduracak şekilde boyutlandırır. Sonuç olarak,background-repeat
no-repeat
olarak ayarlanmazsa resmin tekrarlanmasına neden olacak boşluklar kalabilir.
Son ikisinin başka bir parametre olmadan bağımsız olarak kullanılması amaçlanmıştır.
Aşağıdaki demoda bu anahtar kelimelerin kullanımı gösterilmektedir:
Bu anahtar kelimelerin background-size
'e uygulanmasını gösteren demo:
Arka plan eki
background-attachment
mülkü, katman ekranda göründüğünde arka plan resimlerinin (arka plan katmanının bir parçası olan resimler) sabit konum davranışını değiştirmenize olanak tanır.
scroll
, fixed
ve local
olmak üzere 3 anahtar kelime kabul eder.
background-attachment
mülkünün varsayılan davranışı, scroll
özelliğinin ilk değeridir. Daha fazla alana ihtiyaç duyulduğunda, resimler CSS kutusunun sınırlarına göre belirlenen arka plan katmanında bu alanla birlikte hareket eder.
fixed
değeri kullanıldığında arka plan resimlerinin görüntü alanındaki konumu sabitlenir.
Arka plan katmanında yer alan resimlerin kapladığı alanın ekrandan kaydırılması (veya oluşturulması) gerektiğinde, arka plan katmanındaki resimler, katmanın tamamı görüntü alanı tarafından ekrandan kaydırılana kadar arka plan katmanının etkinleştirdiği orijinal konumda sabit kalı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ı içinde ve dışında oluşturulan alanda (genellikle kaydırma, 2D veya 3D dönüşümler nedeniyle) kapladıkları alanda hareket eder.
Arka planın kaynağı
background-origin
mülkü, belirli bir kutuyla ilişkili arka planların alanını değiştirmenize olanak tanır. Özelliğin 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 deneyin:
Arka plan klibi
background-clip
mülkü, background-origin
mülkü tarafından oluşturulan sınırlardan bağımsız olarak arka plan katmanından görsel olarak nelerin görüleceğini kontrol eder.
background-origin
gibi, CSS arka plan katmanının oluşturulabileceği yerlere karşılık gelen border-box
, padding-box
ve content-box
bölgeleri belirtilebilir. Bu anahtar kelimeler kullanıldığında, belirtilen bölgeden daha uzaktaki arka planın oluşturulması kırpılır veya kırpılır.
background-clip
mülkü, arka planı içerik kutusunun içindeki metinden daha fazla kesecek şekilde kırpan bir text
anahtar kelimesini de kabul eder. Bu efektin, CSS kutusunun içindeki asıl metinde belirgin olması için metnin kısmen veya tamamen şeffaf olması gerekir.
Nispeten yeni bir mülktür. Bu makalenin yazıldığı sırada Chrome ve çoğu tarayıcı bu mülkün kullanılması için -webkit-
ön ekini gerektiriyordu.
Birden fazla arka plan
Modülün başında da belirtildiği gibi, arka plan katmanı birden fazla alt katmanın tanımlanmasına olanak tanır. Özetlemek amacıyla bu alt katmanlara arka planlar diyeceğiz.
Birden fazla arka plan yukarıdan aşağıya doğru tanımlanır. İlk arka plan kullanıcıya en yakın, son arka plan ise kullanıcıdan en uzak arka plandır.
Tanımlanmış 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'inde ve canlı demoda gösterildiği gibi, virgülle ayrılmış arka planla ilgili çoğu CSS özelliği kullanılarak birden fazla katman 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ı
Bir kutunun arka plan katmanına stil uygulamayı kolaylaştırmak için (özellikle birden fazla arka plan katmanı istendiğinde) aşağıdaki kalıbı izleyen bir kısaltma vardır:
background:
<background-image>
<background-position> / <background-size>?
<background-repeat>
<background-attachment>
<background-origin>
<background-clip>
<background-color>?
Birden fazla arka planı kısaltılmış biçimde belirtirken sıra önemlidir. Hem konum hem de boyut değerleri, eğik çizgiyle (/
) ayrılmış şekilde sağlanmalıdır. Kaynağı ve klip davranışını doğru sırada belirtmek, her ikisi için de geçerli olan anahtar kelimeleri ayarlama avantajından yararlanmanıza olanak tanır.
Aşağıdaki beyan, arka planı kırpıp içerik kutusundan alır:
background: url("https://assets.codepen.io/7518/blob.svg") 50%
50% / contain no-repeat content-box;
Bu kısaltma semantikleri 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 test etme
CSS arka planları hakkındaki bilginizi test edin
Arka plan resimleri, CSS kutusunun sol üst tarafına yerleştirilir.
Arka plan resimleri varsayılan olarak tekrarlanır.
Aşağıdaki background-position
beyanlarından hangisi geçerlidir?
background-position: 50% left
background-position: left
background-position: top right 33%
background-position: right bottom
Bir arka plan resmini, kullandığınız bir görüntü alanında sabitlenecek şekilde ayarlamak için:
background-attachment: fixed
background-attachment: scroll
background-position: fixed
background-fixed-to-viewport: true
CSS kutusunda bir arka planın varsayılan background-origin değeri şunlardır:
border-box
padding-box
margin-box
content-box