background-imageCSS'deki nitelik bir elemanın arkasına grafik (örneğin PNG, SVG, JPG.webp, GIF, WEBP) ya da degrade uygular.
CSS ile ekleyebileceğiniz iki farklı görüntü türü vardır: normal görüntüler ve degradeler.
Görüntüler
Arka planda bir görüntü kullanmak oldukça basittir:
body ( background: url(sweettexture.jpg.webp); )url()Değeri, herhangi bir görüntü bir dosya yolu sağlamamıza olanak tanır ve bu element için arka plan olarak görünecektir.
Ayrıca url(). Şuna benziyor:
body ( /* Base64 encoded transparent gif */ background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7); )Bu teknik, iyi bir şey olan tek bir HTTP isteğini kaldırır. Ancak, bazı dezavantajlar vardır, bu nedenle tüm resimlerinizi değiştirmeye başlamadan önce Veri URI'lerinin tüm artılarını ve eksilerini göz önünde bulundurduğunuzdan emin olun.
Ayrıca background-image, HTTP isteklerini azaltmak için başka bir kullanışlı yöntem olan görüntüleri sprite için de kullanabilirsiniz .
Gradyanlar
Arka planları kullanırken başka bir seçenek, tarayıcıya bir degrade oluşturmasını söylemektir. Doğrusal bir gradyanın çok daha basit bir örneği:
body ( background: linear-gradient(black, white); )Ayrıca dairesel renk geçişleri de kullanabilirsiniz:
body ( background: radial-gradient(circle, black, white); )Teknik olarak, gradyanlar arka plan görüntüsünün sadece başka bir şeklidir. Aradaki fark, tarayıcının resmi sizin için yapmasıdır. İşte bunları nasıl yazacağınız: CSS3 Gradient Sözdizimi
Yukarıdaki örnek yalnızca bir degrade kullanır, ancak birden çok degradeyi birbirinin üzerine katman olarak da yerleştirebilirsiniz. Bu tekniği kullanarak oluşturabileceğiniz oldukça şaşırtıcı desenler var.
Bir Yedek Renk Ayarlama
Bir arka plan resmi yüklenemezse veya gradyan arka planınız gradyanları desteklemeyen bir tarayıcıda görüntülenirse, tarayıcı yedek olarak bir arka plan rengi arayacaktır. Yedek renginizi şu şekilde belirtebilirsiniz:
body ( background: url(sweettexture.jpg.webp) blue; )Çoklu Arka Plan Resimleri
Arka planınız için birden çok görüntü veya görüntü ve degradelerin bir karışımını kullanabilirsiniz. Birden çok arka plan görüntüsü artık iyi destekleniyor (tüm modern tarayıcılar ve grafik görüntüler için IE9 +, degradeler için IE10 +).
Birden fazla arka plan görüntüsü kullandığınızda, biraz sezgisel bir yığınlama sıralaması olduğunu unutmayın. İlk önce önde olması gereken görüntüyü ve en sonda olması gereken görüntüyü şöyle listeleyin:
body ( background: url(logo.png.webp), url(background-pattern.png.webp); )Birden fazla arka plan görüntüsü kullandığınızda, her şeyi doğru yere almak için genellikle arka plan için daha fazla değer ayarlamanız gerekir. backgroundSteno kullanmak istiyorsanız, her bir görüntü için değerleri ayrı ayrı ayarlayabilirsiniz. Steno şunun gibi görünecek (ilk görüntü ve değerlerini ikinci görüntüden ve onun değerlerinden ayıran virgüllere dikkat edin):
body ( background: url(logo.png.webp) bottom center no-repeat, url(background-pattern.png.webp) repeat; )Kaç tane arka plan resmi ayarlayabileceğiniz konusunda bir sınır yoktur ve arka plan resimlerinizi canlandırmak gibi harika şeyler yapabilirsiniz. David Walsh'un blogunda animasyonlu çok sayıda arka plan görüntüsü için iyi bir örnek var.
Demo
CodePen'de CSS-Tricks (@ css-tricks) tarafından hazırlanan Kalem arka plan resmine bakın.
İlişkili
- arka plan eki
- arka plan klibi
- arka plan rengi
- arkaplan kökenli
- arka plan konumu
- arkaplan tekrar
- arkaplan boyutu
Daha fazla kaynak
- CSS3 spesifikasyonu
- MDN
- Mükemmel Tam Sayfa Arka Plan Resimleri
- CSS Degradelerinde Uzmanlaşma (Slidedeck)
Tarayıcı Desteği
Normal görüntüler her yerde çalışır ve birden çok görüntü modern tarayıcılarda ve IE9 + 'da çalışır. İşte gradyanlar için destek:
| Krom | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 10+ | 5.1+ | 3.6+ | 12.1+ | 10+ | 4+ | 5.1+ |