Arka planlar

CSS Podcast - 053: Arka Plan

Arka planlar

Her CSS kutusunun arkasında, arka plan katmanı adı verilen özel bir katman bulunur. CSS, üzerinde anlamlı değişiklikler yapmak için birden fazla arka plana izin vermek de dahil olmak üzere çeşitli yöntemler sunar.

Arka plan katmanları, kullanıcıya en uzak olup padding-box bölgesinden başlayan bir kutunun içeriğinin arkasında oluşturulur. Bu, arka plan katmanının kenarlıklarla hiç ç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 başlangıç değeri transparent olup üst öğe içeriğinin görünür olmasını sağlar. Bir arka plan katmanında geçerli bir renk ayarı, o öğe üzerinde 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 aşağıdakileri kabul eder:

• url CSS işlevini kullanan bir resim URL'si veya veri URI'si.
• Bir 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 iletildiğinde, arka plan resmi oluşturmanıza olanak tanıyan çeşitli gradyan CSS işlevleri mevcuttur.

Hangi renk geçişi işlevinin kullanıldığına bakılmaksızın, sonuçta elde edilen resim, kullanılabilir alan miktarına uyacak şekilde doğal olarak boyutlandırılır.

Renk geçişi 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.

Aşağıdaki değerlerden biriyle background-repeat özelliğini kullanarak bunu değiştirebilirsiniz:

• repeat: Resim mevcut alan içinde tekrarlanarak gerektiği şekilde kırpılır.
• round: Resim, mevcut alana mümkün olduğunca fazla örnek sığdırmak için yatay ve dikey olarak tekrarlanır. Resimdeki alan arttıkça resim uzatılır ve resmin orijinal genişliğinin yarısı genişletildikten sonra daha fazla resim örneği eklemek için sıkıştırılır.
• space: Resim, mevcut alana mümkün olduğunca çok sayıda örnek sığdırmak için yatay ve dikey olarak tekrarlanır. Bu şekilde, kırpılmadan resmin belirli kısımları gereken şekilde boşluk bırakılır. Tekrarlanan resimler, bir arka plan katmanının kapladığı alanın kenarlarına dokunur ve aralarındaki boşluk eşit olarak dağıtılır.

background-repeat özelliği, x ve y eksenlerinin davranışını bağımsız olarak ayarlamanıza olanak tanır. İlk parametre yatay tekrar davranışını, ikinci parametre dikey tekrar davranışını ayarlar.

Tek bir değer kullanırsanız bu değer hem yatay hem de dikey tekrarlara uygulanır.

Kısayol, amacınızı daha iyi anlamanızı sağlayacak tek kelimelik kullanışlı seçenekler de sunar.

repeat-x değeri bir resmi yalnızca yatay olarak tekrarlar; bu, repeat no-repeat değerine eşdeğerdir.

Aşağıdaki demoda background-repeat mülkünün aşağıdaki özellikleri gösterilmektedir:

Arka plan konumu

Web'deki bazı görüntülerin stilinin background-repeat: no-repeat bildirimiyle belirlendiğini fark etmiş olabilirsiniz. Bu tür resimler, kapsayıcılarının sol üst kısmında gösterilir.

Arka plan resimlerinin ilk konumu sol üsttedir. background-position özelliği, resmin konumunu dengeleyerek bu davranışı değiştirmenize olanak tanır.

background-repeat özelliğinde olduğu gibi background-position özelliği, resimleri varsayılan olarak iki değerle bağımsız olarak x ve y ekseni boyunca 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 kullanıldığında anahtar kelimelerin sırası önemli olmaz:

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 kullanışlı bir tek değer kısaltmasına sahiptir; atlanan değer 50% olarak çözümlenir. Aşağıda, background-position mülkünün kabul ettiği anahtar kelimeleri kullanarak bunu gösteren bir örnek verilmiştir:

background-position mülkü, varsayılan iki parametre biçimi ve bir parametre biçimine ek olarak dört parametre de kabul eder:

Üç veya dört parametre kullanıldığında, tarayıcının göreli CSS kutusunun hangi kenarından kaynaklanması gerektiğini hesaplayabilmesi için CSS uzunluğu veya yüzdesinin önüne top, left, right veya bottom anahtar kelimelerinin gelmesi gerekir.

Üç parametre kullanıldığında, bir CSS uzunluğu veya değeri ikinci veya üçüncü parametre olabilir. Diğer ikisi anahtar kelimeler olur. Başarılı olduğu anahtar kelime, CSS uzunluğunun veya değerinin göreli konumu olan kenarı belirlemek için kullanılır. Belirtilen diğer anahtar kelimenin göreli konumu 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;

CSS arka plan resmine background-position: top left 20% uygulanırsa resim kutunun üst kısmına yerleştirilir; 20% değeri, kutunun sol tarafından (x ekseninde) %20'lik bir ofseti temsil eder.

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 kaynaklarına göre bir ofsete karşılık gelen iki değerle eşleştirilir. Arka plan resmine background-position: bottom 20% right 30% uygulanırsa arka plan resmi, CSS kutusunun alt kısmından %20 ve sağ tarafına yerleştirilir.

Aşağıdaki demo bu davranışı göstermektedir:

CSS ve anahtar kelime değerlerinin karışımını kullanarak background-position özelliğini kullanmayla ilgili daha fazla örneği burada bulabilirsiniz:

Arka Plan Boyutu

background-size özelliği, arka plan resimlerinin boyutunu belirler. Varsayılan olarak arka plan resimlerinin boyutu içsel (gerçek) genişlik, yükseklik ve en boy oranlarına göre belirlenir.

background-size özelliği, CSS uzunluk ve yüzde değerlerini veya 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 parametreyi kabul eder.

background-size mülkü aşağıdaki anahtar kelimeleri kabul eder:

• auto: Arka plan resmi bağımsız olarak kullanıldığında kendi içsel genişliğine ve yüksekliğine göre boyutlandırılır. Genişlik (ilk parametre) veya yükseklik (ikinci parametre) için auto 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 mülkünün varsayılan davranışıdır.
• cover: Arka plan katmanının tüm alanını kaplar. Bu, resmin uzatıldığı veya kırpıldığı anlamına gelebilir.
• contain: Resmi uzatmadan veya kırpmadan alanı dolduracak şekilde boyutlandırır. Sonuç olarak, background-repeat no-repeat olarak ayarlanmadığı sürece, resmin tekrarlanmasına neden olacak boş alan kalabilir.

Son ikisinin başka bir parametre olmadan bağımsız bir şekilde kullanılması amaçlanmıştır.

Aşağıdaki demoda bu anahtar kelimelerin işleyiş şekli gösterilmektedir:

Bu anahtar kelimelerin background-size için uygulanması gösterilmektedir:

Arka plan eki

Katman ekranda göründüğünde background-attachment özelliği, arka plan resimlerinin (arka plan katmanının parçası olan resimler) sabit konum davranışını değiştirebilmenizi sağlar.

3 anahtar kelime kabul eder: scroll, fixed ve local.

background-attachment özelliğinin varsayılan davranışı, scroll başlangıç değeri olur. Daha fazla alan gerektiğinde, resimler CSS kutusunun sınırları tarafından belirlenen arka plan katmanında bu boşlukla birlikte hareket eder.

fixed değerinin kullanılması, arka plan resimlerinin konumunu görüntü alanına sabitler.

Arka plan katmanı resimlerinin alanı başlangıçta ekran dışında kaydırıldığında (veya oluşturulduktan) sonra, arka plan katmanındaki resimler orijinal konumlarında sabit kalır ve arka plan katmanı, tüm katmanı görüntü alanı tarafından ekrandan kaydırılana kadar bu resimlerin bulunmasını sağlar.

local anahtar kelimesi, arka plan resimlerinin konumunun öğenin içeriğine göre sabitlenebilmesini sağlar. Arka plan resimleri, CSS kutusunun sınırları içinde ve dışında (genellikle kaydırma, 2D veya 3D dönüşümler nedeniyle) oluşturulduğu için kapladıkları alan boyunca hareket eder.

Arka plan kaynağı

background-origin özelliği, belirli bir kutuyla ilişkili arka plan 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 şu seçenekleri deneyin:

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ından görsel olarak nelerin göründüğünü kontrol eder.

background-origin gibi belirtilebilecek bölgeler, CSS arka plan katmanının oluşturulabileceği yerlere karşılık gelen border-box, padding-box ve content-box şeklindedir. Bu anahtar kelimeler kullanıldığında, arka planın belirtilen bölgeden daha fazla oluşturulması durumunda kırpılır veya kırpılır.

background-clip özelliği, arka planı içerik kutusundaki metinden başka olmayacak şekilde kırpan text anahtar kelimesini de kabul eder. Bu efektin bir CSS kutusundaki asıl metinde belirgin olması için metnin kısmen veya tamamen şeffaf olması gerekir.

Nispeten yeni bir özellikti. Bu yazının hazırlandığı tarihte, 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 fazla alt katmanın tanımlanmasına olanak tanır. Örneğin, bu alt katmanlardan arka plan olarak bahsedeceğim.

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ıya en uzak olandır.

Tanımlanan tek arka plan veya son katman, tarayıcı tarafından nihai 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, birden çok katman, arka planla ilgili olan ve virgülle ayrılmış çoğu CSS özelliği kullanılarak tek tek 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 stenosu

Özellikle birden çok arka plan katmanı istendiğinde, bir kutunun arka plan katmanının stilini daha kolay belirlemek için aşağıdaki özel 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 çok arka plan belirtilmesi için sıralama ölçütü önemlidir. Konum ve boyut değerlerinin her ikisi de eğik çizgiyle (/) ayrılarak sağlanmalıdır. Kaynak ve klip davranışının doğru sırada belirtilmesi, aynı anda her ikisi için de geçerli olan anahtar kelimeleri ayarlama avantajından yararlanmanızı sağlar.

Aşağıdaki beyan, arka planı keser ve içerik kutusundan çıkarır:

background: url("https://assets.codepen.io/7518/blob.svg") 50%
      50% / contain no-repeat content-box;

Bu kısaltmalar anlamlılar göz önünde bulundurularak, kod snippet'inin arka planla ilgili önceki bildirimleri şu ş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ı ile ilgili bilginizi test edin