Arka planlar

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.

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