Arkaplan - CSS Hileleri | CSS Almanak 2024

CSS'deki backgroundözellik, herhangi bir öğenin arka planını (o öğedeki içeriğin altında neyin boyandığı) kontrol etmenizi sağlar. Bu bir steno özelliktir, yani birden fazla CSS özelliğini bir arada yazmanıza izin verir. Böyle:

body ( background: url(sweettexture.jpg.webp) /* image */ top center / 200px 200px /* position / size */ no-repeat /* repeat */ fixed /* attachment */ padding-box /* origin */ content-box /* clip */ red; /* color */ )

background diğer sekiz mülkten oluşur:

background-image
background-position
background-size
background-repeat
background-attachment
background-origin
background-clip
background-color

Bu özelliklerin istediğiniz kombinasyonunu hemen hemen her sırada kullanabilirsiniz (spesifikasyonda önerilen sıra yukarıda olsa da). Yine de bir sorun var: backgroundözellikte belirtmediğiniz her şey otomatik olarak varsayılan değerine ayarlanır. Öyleyse böyle bir şey yaparsanız:

body ( background-color: red; background: url(sweettexture.jpg.webp); )

Arka plan kırmızı yerine şeffaf olacaktır. Yine de düzeltme kolaydır: sadece background-colorsonrasını tanımlayın backgroundveya sadece steno kullanın (ör. background: url(… ) red;)

Çoklu Arka Planlar

CSS3, birbirinin üzerinde katman oluşturan çoklu arka planlar için destek ekledi. Arka planlarla ilgili herhangi bir özellik aşağıdaki gibi virgülle ayrılmış bir liste alabilir:

body ( background: url(sweettexture.jpg.webp), url(texture2.jpg.webp) black; background-repeat: repeat-x, no-repeat; )

Virgülle ayrılmış listedeki her değer bir katmana karşılık gelir: ilk değer en üst katmandır, ikinci değer ikinci katmandır ve arka plan rengi her zaman son katmandır.

Tarifler

CodePen'de Timothy Miller'ın (@tjacobdesign) Pen emBzRd'sini görün.

Tarayıcı Desteği

Destek, farklı özelliklere göre değişir ve Almanak'taki ilgili her makalenin benzersiz tarayıcı destek notları vardır. Temel tek renkli arka planlar ve tek görüntüler her yerde çalışır ve desteklenmeyen her şey, ister görüntü ister renk olsun, bir sonraki en iyi şeye geri döner.