Bir öğeye iki arka plan resmini nasıl eklerim? CSS2 kullanarak birden çok arka plan ve vuruş css'ye birden çok arka plan görüntüsü ekleme.

Bugün arka plan özelliği ve isteğe bağlı değerleri kullanılarak ayarlanan arka plan görüntüleri üzerinde çalışacağız. Aynı öğeye birden çok arka plan ayarlama uygulamasındaki birkaç pratik örneğe bakalım.

Bu, birçok durumda ve anda kullanışlı olabilir. Özellikle bu durumda sözde elemanların kullanımı, parametrelerde çok esnek oldukları için.

Çok sayıda arka plan resmi

Bir blok içinde blok oluşturmamak için en kolay yol, ana elemana bir satır kural eklemek ve böylece istenen sonucu elde etmektir. Bu, sizi tırmanma ihtiyacından kurtarmak için özlü seçenekler olarak kabul edilebilir. kaynak... Her şey sadece CSS ile yapılacaktır.

Blockimg (arka plan: url ("img / img2.png"), / * en üstteki arka plan ve ardından sırayla * / url ("img / img3.png"), url ("img / img1.jpg"); arka plan konumu : 370px merkez, 120px 150px, merkez merkez; / * görüntülerin konumu * / arka plan-tekrar: tekrar yok; / * görüntü tekrarı * / arka plan rengi: # 444; / * arka plan rengi gerekiyorsa * / kutu-gölge : 0 1px 2px rgba (0, 0, 0, 0.1); kenar boşluğu: 100px otomatik 15px; kutu-boyutlandırma: border-box; dolgu: 25px; genişlik: 700px; min-height: 300px;) / * steno * / . blockimg (arka plan: url ("img / img2.png") tekrarsız 370 piksel merkez, url ("img / img3.png") tekrarsız 120 piksel 150 piksel, url ("img / img1.jpg") tekrarsız merkez merkez ; kenar boşluğu: 100 piksel otomatik 15 piksel; kutu boyutlandırma: kenarlık kutusu; dolgu: 25 piksel; genişlik: 700 piksel; minimum yükseklik: 300 piksel;)

Açıklama.Öğeye, konumuna giden yolu gösteren bir arka plan görüntüsü verin. Virgülle ayırarak, yukarıdaki kodda da görebileceğiniz gibi, bize daha birçok arka plan yazma fırsatı verildi. Sayılarının sırası, hangi görüntünün diğerlerinin üstünde olacağını belirler. Yani, ilk arka plan diğerlerinin üzerindedir ve ardından dizi, geleneksel bir grafik düzenleyicinin ilkesini takip eder.

takip ediyor Ekstra seçenekler bireysel özellikler aracılığıyla: konum, tekrarlama, boyut, gerekirse başka bir renk. Ayrıca tüm parametrelerin resim numarası ile aynı sırada virgülle ayrılmış olarak yazılmasına dikkat ediyoruz.

Ve son detay. Kodun tamamı, yalnızca bir genel arka plan özelliği kullanılarak kısaltılabilir. Kod örneğinde bunun nasıl yapıldığını gösteren ikinci bir seçenek var.

Sözde eleman aracılığıyla arka plan görüntüsü

Ayrıca şunu da unutmayın alternatif seçeneklerönceki ve sonraki sözde öğeler bu şekildedir. Uygulamalarında olumlu bir artı var - görüntü, öğenin kenarına getirilebilir, böylece sınırda kaybolmaz, ancak üstünde olur. Bu teknik, 3B efekt gibi bir şey yapmanız gerektiğinde kullanışlıdır.

Blockimg (arka plan: url ("img / img1.jpg") tekrarsız; / * öğe arka planı * / konum: göreceli; / * konumlandırma alanı * / kenar boşluğu: 200 piksel otomatik 15 piksel; kutu boyutlandırma: kenarlık kutusu; dolgu: 25 piksel; genişlik: 700 piksel; minimum yükseklik: 300 piksel;) .blockimg :: önce (arka plan: url ("img / img1.png") tekrarsız merkez merkez; alt: 0; içerik: ""; yükseklik: 295 piksel; sol: 0; konum: mutlak; / * mutlak konumlandırma * / sağ: 0; üst: -150 piksel;)

Açıklama. Aslında, her şey çok basit. Arka planı her zamanki gibi ana öğeye ayarlayın. Ardından anahtar özellik konumu gelir: göreceli; bu, ana öğede bulunan ve bir konuma sahip olan başka bir öğeyi hareket ettirmek için alanı tanımlar: mutlak; ...

Başka bir element yerine, resmi olarak ayrı bir alan olarak gitse de, sözde bir element kullanıyoruz. Ona mutlak bir pozisyon veriyoruz ve ihtiyacımız olan yere yerleştiriyoruz.

Bir kerede bir elemana birkaç tane ekleyebilirsiniz arka plan resimleri tek bir mülk arka planı aracılığıyla. Bu, karmaşık bir arka plan veya tek bir resim oluşturmak için bir öğeyi kullanarak onu birkaç kez görüntülemenize olanak tanır. farklı ayarlar... Parametreleriyle birlikte tüm görüntüler virgülle ayrılmış olarak listelenir, aynı zamanda ilk olarak diğer görüntülerin üstünde görüntülenen resim gösterilir ve sırasıyla sonuncusu en alttaki resimdir. Örnek 1, üç resimli bir arka planın nasıl oluşturulacağını gösterir.

Örnek 1. Üç arka plan

Yukarıdaki örnekte olduğu gibi arka plan için bazı stil özelliklerini ayrı ayrı ayarlamanız gerekiyorsa, arka plan boyutu gibi, her arka plan için parametreler virgülle ayrılmış olarak listelenir. Bu örneğin sonucu Şekil 2'de gösterilmektedir. bir.

Pirinç. 1. Üç resimli arka plan

Arka plan için ayrı görüntüler, örnek 2'de gösterildiği gibi konumlarını değiştirmenize ve canlandırmanıza olanak tanır.

Örnek 2. Hareketli arka plan

Şimdi çerçeveli bir blok oluşturmak için bir resmin nasıl kullanılacağını düşünelim (Şekil 2). Blok genişliği sabittir ve blok içeriğinin hacmine bağlı olarak yükseklik uzar.

Pirinç. 2. Elle çizilmiş çerçeve

Şekil açıkça üst ve Alt kısım kesilmek grafik düzenleyici ve yatay olarak konumlandırın. Orta kısım, dikişsiz dikey olarak tekrarlanacak şekilde seçilmiştir. Resmin belirgin bir yinelenen deseni var, bu nedenle seçimde zorluk olmamalıdır. Sonuç olarak, böyle hazırlanmış bir görüntü elde edeceksiniz (Şekil 3). Damalı kutu şeffaflığı ifade eder, resimlerle birlikte renkli bir arka plan ayarlamanıza ve stiller arasında kolayca değiştirmenize olanak tanır.

Pirinç. 3. Arka plan görüntüsü için hazırlandı

Arka planın kendisi arka plan özelliği tarafından görüntülenir, ayrıca istenen parçanın koordinatlarını da ayarlar. Her arka planın parametreleri virgülle ayrılmış olarak listelenir ve bu durumda sıraları önemlidir. Bloğun üst ve alt kısımlarının üst üste gelmemesini istiyoruz, bu yüzden onları ilk sıraya koyuyoruz (örnek 3). Arka plan rengi en son belirtilir.

Örnek 3. Birkaç arka plan resimleri

İlk arka plan kutunun üst kenarlığını, ikinci arka plan altını ve üçüncü arka plan dikey kenarlıkları çizer. Sonuncusu, bloğun şeffaf orta kısmında görünen renktir (Şekil 4).

). Bugün biraz başka bir ilginç özellik hakkında konuşacağız - arka planda birden fazla görüntünün kullanılması.

arka kompozisyon

Genel olarak, arka planda birkaç görüntü oluşturmanız gerekebilecek birçok neden vardır, bunlardan en önemlileri şunlardır:

• Bireysel görüntüler birlikte düzleştirilmiş katmanlara sahip görüntüden daha az ağırlığa sahipse, görüntülerin boyutunda trafik tasarrufu sağlar ve
• örneğin paralaks efektlerini uygularken bireysel katmanların bağımsız davranışına duyulan ihtiyaç.

Başka makul sebepler olabilir :)

klasik yaklaşım

Bu nedenle, birkaç arka plan resmini üst üste yerleştirmemiz gerekiyor. Bu görev genellikle nasıl çözülür? Çok basit: Her arka plan görüntüsü için bir blok oluşturulur ve buna karşılık gelen arka plan görüntüsü atanır. Bloklar ya iç içe yerleştirilmiştir ya da uygun konumlandırma kurallarıyla bir sıraya yerleştirilmiştir. İşte basit bir örnek:

Yalnızca tanıtım amacıyla "deniz kızı" içinde "balık tutma" sınıfıyla engelleyin.

Şimdi bazı stiller:
.sample1 .sea, .sample1 .deniz kızı, .sample1 .fishing (yükseklik: 300 piksel; genişlik: 480 piksel; konum: göreceli;) .sample1 .sea (arka plan: url (medya / deniz.png) tekrar-x sol üst;) .sample1 .mermaid (arka plan: url (medya / deniz kızı.svg) tekrar-x sol alt;) .sample1 .fish (arka plan: url (medya / balık.svg) tekrarsız; yükseklik: 70 piksel; genişlik: 100 piksel; sol : 30 piksel; üst: 90 piksel; konum: mutlak;) .sample1 .balık tutma (arka plan: url (medya / balık tutma.svg) tekrarsız sağ üst 10 piksel;)

Sonuç:

V bu örneküç iç içe geçmiş arka plan ve "arka plan" bloklarının yanında bulunan balıklı bir blok. Teoride balık, örneğin JavaScript veya CSS3 Geçişler / Animasyonlar kullanılarak hareket ettirilebilir.

Bu arada, bu örnek, yine CSS3'te tanımlanan ".fishing" için yeni arka plan konumlandırma sözdizimini kullanır:
arka plan: url (medya / balık tutma.svg) tekrarsız sağ üst 10 piksel;
Üzerinde şu an IE9 + ve Opera 11+'da desteklenir, ancak Firefox 10 ve Chrome 16'da desteklenmez. Bu nedenle, son iki taramanın kullanıcıları henüz balık yakalayamayacaktır.

Çoklu arka planlar

CSS3'e eklenen yeni bir özellik kurtarmaya geliyor - aynı anda bir öğe için birden çok arka plan görüntüsü tanımlama yeteneği. Şuna benziyor:

Ve ilgili stiller:
.sample2 .sea (yükseklik: 300 piksel; genişlik: 480 piksel; konum: göreceli; arka plan resmi: url ("medya / balık tutma.svg"), url ("medya / deniz kızı.svg"), url ("medya / deniz. png "); arka plan konumu: sağ üst 10 piksel, sol alt, sol üst; arka plan tekrarı: tekrar yok, tekrar-x, tekrar-x;) .sample2 .fish (arka plan: url (" media / fish.svg") ") tekrar yok; yükseklik: 70 piksel; genişlik: 100 piksel; sol: 30 piksel; üst: 90 piksel; konum: mutlak;)
Birden çok görüntü tanımlamak için, virgülle ayırarak tek tek görüntüleri listeleyen arka plan görüntüsü kuralını kullanmanız gerekir. Ek kurallar, ayrıca bir liste, görüntülerin her biri için konumlandırma, tekrarlar ve diğer parametreleri ayarlayabilirsiniz. Görüntülerin listelendiği sıraya dikkat edin: katmanlar soldan sağa, en yukarıdan en aşağıya doğru listelenir.

Sonuç tamamen aynı:

bir kural

Sonraki işlemler için balığın ayrı bir blokta seçilmesi gerekmiyorsa, tüm resim tek bir blokta yeniden yazılabilir. basit kural:

Stiller:
.sample3 .sea (yükseklik: 300 piksel; genişlik: 480 piksel; konum: göreceli; arka plan resmi: url ("medya / balık tutma.svg"), url ("medya / deniz kızı.svg"), url ("medya / balık. svg "), url (" media / sea.png "); arka plan konumu: sağ üst 10 piksel, sol alt, 30 piksel 90 piksel, sol üst; arka plan tekrarı: tekrar yok, tekrar-x;)

Sonuçla bir resim vermeyeceğim - inan bana, yukarıdaki iki resimle örtüşüyor. Ancak, özellikle "arka plan tekrarına" tekrar dikkat edin - spesifikasyona göre, listenin sonundaki bir kısım eksikse, tarayıcı belirtilen listeyi sayıyla eşleştirmek için gerektiği kadar tekrar etmelidir. listedeki resimlerin

Bu durumda, bu açıklamaya eşdeğerdir:
arka plan-tekrar: tekrar yok, tekrar-x, tekrar yok, tekrar-x;

Daha da kısa

CSS 2.1'i hatırlarsanız, arka plan resimlerini kısa ve öz bir şekilde tanımlama yeteneğini tanımlar. Birden fazla görüntüye ne dersiniz? Şunlar da mümkündür:

Sample4 .sea (yükseklik: 300 piksel; genişlik: 480 piksel; konum: göreceli; arka plan: url ("medya / balık tutma.svg") sağ üst 10 piksel tekrarsız, url ("medya / deniz kızı.svg") sol alt tekrar-x , url ("media / fish.svg") 30px 90px tekrarsız, url ("media / sea.png") tekrar-x;)

Ancak, artık değerleri atlayamayacağınızı unutmayın (varsayılan değerlerle çakışmadıkça). Bu arada, arka plan görüntüsünün rengini ayarlamak istiyorsanız, bunu en son katmanda yapmanız gerekir.

Dinamik görüntüler

Kompozisyon, kabın boyutuna bağlı olmaktan daha fazla statik veya dinamik değilse, o zaman birden fazla arka plan, sayfa tasarımını açıkça basitleştirir. Ancak, kompozisyonun ayrı ayrı öğeleriyle javascript'ten (hareket, kaydırma, vb.) bağımsız olarak çalışmanız gerekiyorsa ne olur?

Bu arada, işte gerçek hayattan bir örnek - Yandex'de karahindibalı bir tema:


Kodun içine girerseniz, aşağıdakine benzer bir şey göreceksiniz:

...

"b-fluff-bg", "b-fluff__cloud" ve "b-fluff__item" sınıflarına sahip bloklar, birbiriyle örtüşen arka plan resimleri içerir. Ayrıca, bulutlu arka plan sürekli kayar ve ekranda karahindibalar uçar.

Bu, birden fazla arka plan kullanılarak yeniden yazılabilir mi? Prensip olarak, evet, ancak 1) hedef tarayıcılarda bu özellik için destek sağlandı ve ... 2) okumaya devam edin;)

Birden çok arka plana nasıl hoparlör eklerim? Böyle bir durumda, tarayıcının dahili görünümde atması uygun olur. bireysel parametreler uygun kurallara göre arka plan resimleri. Örneğin, konumlandırma için bir "arka plan konumu" vardır ve ofsetler için yalnızca değiştirmeniz gerekir. Ancak, birden fazla resim kullanmak ücretlidir - bu kural (ve benzer herhangi bir kural), bloğunuz için ayarlanan tüm arka planlar için konumu listelemelidir ve bunu seçici olarak yapamazsınız.

Balıklı arka planımıza animasyon eklemek için aşağıdaki kodu kullanabilirsiniz:
$ (belge) .ready (fonksiyon () (var deniz = $ (".örnek5 .deniz"); var balıklarX = 30; var balıklarY = 90; var balıkX = 0; var balıkY = 0; var deniz kızıX = 0; var t = 0; function canlandırmaDöngüsü () (fishesY = 90 + Math.floor (30 * Math.sin (t ++ / 180.0)); if (- fishesX< 0) fishesX = 480; mermaidX += 0.5; if(mermaidX >480) deniz kızıX = 0; balıkY = -10 + (10 * Math.cos (t * 0.091)); balıkX = 10 + (5 * Math.sin (t * 0.07)); sea.style.backgroundPosition = "üst" + balıkY + "px sağ" + balıkX + "px," + deniz kızıX + "alt piksel" + balıklarX + "px" + balıklarY + "px, sol üst"; window.requestAnimFrame (animasyonDöngüsü); ) animasyonDöngüsü (); ));
nerede
window.requestAnimFrame = (function () (dönüş window.requestAnimationFrame || window.msRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.webkitRequestAnimationFrame || (işlev (geri arama))) (60 );) );

Ve bu arada CSS3 Transitions/Animations üzerinden de animasyonlar yapılabilir ama bu ayrı bir tartışma konusu.

Paralaks ve etkileşimli

Son olarak, benzer manevralarla, arka planla kolayca paralaks efektleri veya etkileşimli etkileşim ekleyebilirsiniz:

Birden çok arka plan resmi bu tür senaryolarda kullanışlıdır, çünkü yalnızca arka plandan (içerik değil) bahsediyor olsak da, bunları kullanmak html kodunuzu ve DOM'yi karmaşık hale getirmekten kaçınmanıza olanak tanır. Ama her şeyi ödemek zorundasın: İletişim kuramıyorum bireysel elemanlar ada, kimliğe, sınıfa veya başka bir parametreye göre kompozisyon. Koddaki bileşimdeki öğelerin sırasını açıkça hatırlamalıyım ve herhangi bir öğenin herhangi bir parametresindeki her değişiklik için, aslında, tüm öğeler için bu parametrenin değerlerini açıklayan satırı yapıştırmalı ve güncellemeliyim. tüm kompozisyon.

Sea.style.backgroundPosition = "üst" + balıkY + "px sağ" + balıkX + "px," + denizkızıX + "alt piksel" + balıklarX + "px" + balıklarY + "px, sol üst";

Bunun, sayfanın html kodunu olabildiğince temiz bırakırken, tek tek katmanlarla ilişkilerin sanallaştırılmasını devralacak uygun javascript koduna sarılabileceğinden eminim.

Uyumluluk ne durumda?

Tüm modern versiyonlar popüler tarayıcılar IE9 + dahil, birden fazla görüntüyü destekler (örneğin, caniuse ile kontrol edebilirsiniz).

Modernizr'i, birden fazla arka planı desteklemeyen tarayıcılara alternatifler sağlamak için de kullanabilirsiniz. Chris Coyier'in birden fazla arka plan kullanırken katman düzeniyle ilgili notunda yazdığı gibi, şöyle bir şey yapın:

Multiplebgs gövdesi (/ * Gerçeği aşan ve civcivleri kaynaksız bırakan harika çoklu BG bildirimleri * /) .no-multiplebgs gövdesi (/ * laaaaaame geri dönüş * /)
Geriye dönük uyumluluk sağlamak için JS'yi kullanma konusunda kafanız karıştıysa, arka planı iki kez bildirmeniz yeterlidir, ancak bunun da kaynakların olası çift yüklenmesi şeklinde dezavantajları vardır (bu, belirli bir tarayıcıda css işlemenin uygulanmasına bağlıdır):

/ * çoklu arka plan yedeği * / arka plan: # 000 url (...) ...; / * Gerçekliği aşan ve civcivleri kaynaksız bırakan harika çoklu BG bildirimleri * / arka plan url (...), url (...), url (...), # 000 url (...);

Windows 8 hakkında düşünmeye başladıysanız, aynı motor IE10'da olduğu gibi dahili olarak kullanıldığından, metro tarzı uygulamalar geliştirirken birden fazla arka plan kullanabileceğinizi unutmayın.

not Konuyla ilgili: Hakkında olağanüstü makaleyi hatırlamadan edemiyorum.

). Bugün biraz başka bir ilginç özellik hakkında konuşacağız - arka planda birden fazla görüntünün kullanılması.

arka kompozisyon

Genel olarak, arka planda birkaç görüntü oluşturmanız gerekebilecek birçok neden vardır, bunlardan en önemlileri şunlardır:

• Bireysel görüntüler birlikte düzleştirilmiş katmanlara sahip görüntüden daha az ağırlığa sahipse, görüntülerin boyutunda trafik tasarrufu sağlar ve
• örneğin paralaks efektlerini uygularken bireysel katmanların bağımsız davranışına duyulan ihtiyaç.

Başka makul sebepler olabilir :)

klasik yaklaşım

Bu nedenle, birkaç arka plan resmini üst üste yerleştirmemiz gerekiyor. Bu görev genellikle nasıl çözülür? Çok basit: Her arka plan görüntüsü için bir blok oluşturulur ve buna karşılık gelen arka plan görüntüsü atanır. Bloklar ya iç içe yerleştirilmiştir ya da uygun konumlandırma kurallarıyla bir sıraya yerleştirilmiştir. İşte basit bir örnek:

Yalnızca tanıtım amacıyla "deniz kızı" içinde "balık tutma" sınıfıyla engelleyin.

Şimdi bazı stiller:
.sample1 .sea, .sample1 .deniz kızı, .sample1 .fishing (yükseklik: 300 piksel; genişlik: 480 piksel; konum: göreceli;) .sample1 .sea (arka plan: url (medya / deniz.png) tekrar-x sol üst;) .sample1 .mermaid (arka plan: url (medya / deniz kızı.svg) tekrar-x sol alt;) .sample1 .fish (arka plan: url (medya / balık.svg) tekrarsız; yükseklik: 70 piksel; genişlik: 100 piksel; sol : 30 piksel; üst: 90 piksel; konum: mutlak;) .sample1 .balık tutma (arka plan: url (medya / balık tutma.svg) tekrarsız sağ üst 10 piksel;)

Sonuç:

Bu örnekte, "arka plan" bloklarının yanında yer alan iç içe geçmiş üç arka plan ve balık içeren bir blok vardır. Teoride balık, örneğin JavaScript veya CSS3 Geçişler / Animasyonlar kullanılarak hareket ettirilebilir.

Bu arada, bu örnek, yine CSS3'te tanımlanan ".fishing" için yeni arka plan konumlandırma sözdizimini kullanır:
arka plan: url (medya / balık tutma.svg) tekrarsız sağ üst 10 piksel;
Şu anda IE9 + ve Opera 11+'da desteklenmektedir, ancak Firefox 10 ve Chrome 16'da desteklenmemektedir. Bu nedenle, son iki taramanın kullanıcıları henüz balık yakalayamayacaktır.

Çoklu arka planlar

CSS3'e eklenen yeni bir özellik kurtarmaya geliyor - aynı anda bir öğe için birden çok arka plan görüntüsü tanımlama yeteneği. Şuna benziyor:

Ve ilgili stiller:
.sample2 .sea (yükseklik: 300 piksel; genişlik: 480 piksel; konum: göreceli; arka plan resmi: url ("medya / balık tutma.svg"), url ("medya / deniz kızı.svg"), url ("medya / deniz. png "); arka plan konumu: sağ üst 10 piksel, sol alt, sol üst; arka plan tekrarı: tekrar yok, tekrar-x, tekrar-x;) .sample2 .fish (arka plan: url (" media / fish.svg") ") tekrar yok; yükseklik: 70 piksel; genişlik: 100 piksel; sol: 30 piksel; üst: 90 piksel; konum: mutlak;)
Birden çok görüntü tanımlamak için, virgülle ayırarak tek tek görüntüleri listeleyen arka plan görüntüsü kuralını kullanmanız gerekir. Ek kurallar, ayrıca bir liste, görüntülerin her biri için konumlandırma, tekrarlar ve diğer parametreleri ayarlamak için kullanılabilir. Görüntülerin listelendiği sıraya dikkat edin: katmanlar soldan sağa, en yukarıdan en aşağıya doğru listelenir.

Sonuç tamamen aynı:

bir kural

Sonraki işlemler için balığın ayrı bir blokta seçilmesi gerekmiyorsa, resmin tamamı tek bir basit kuralla yeniden yazılabilir:

Stiller:
.sample3 .sea (yükseklik: 300 piksel; genişlik: 480 piksel; konum: göreceli; arka plan resmi: url ("medya / balık tutma.svg"), url ("medya / deniz kızı.svg"), url ("medya / balık. svg "), url (" media / sea.png "); arka plan konumu: sağ üst 10 piksel, sol alt, 30 piksel 90 piksel, sol üst; arka plan tekrarı: tekrar yok, tekrar-x;)

Sonuçla bir resim vermeyeceğim - inan bana, yukarıdaki iki resimle örtüşüyor. Ancak, özellikle "arka plan tekrarına" tekrar dikkat edin - spesifikasyona göre, listenin sonundaki bir kısım eksikse, tarayıcı belirtilen listeyi sayıyla eşleştirmek için gerektiği kadar tekrar etmelidir. listedeki resimlerin

Bu durumda, bu açıklamaya eşdeğerdir:
arka plan-tekrar: tekrar yok, tekrar-x, tekrar yok, tekrar-x;

Daha da kısa

CSS 2.1'i hatırlarsanız, arka plan resimlerini kısa ve öz bir şekilde tanımlama yeteneğini tanımlar. Birden fazla görüntüye ne dersiniz? Şunlar da mümkündür:

Sample4 .sea (yükseklik: 300 piksel; genişlik: 480 piksel; konum: göreceli; arka plan: url ("medya / balık tutma.svg") sağ üst 10 piksel tekrarsız, url ("medya / deniz kızı.svg") sol alt tekrar-x , url ("media / fish.svg") 30px 90px tekrarsız, url ("media / sea.png") tekrar-x;)

Ancak, artık değerleri atlayamayacağınızı unutmayın (varsayılan değerlerle çakışmadıkça). Bu arada, arka plan görüntüsünün rengini ayarlamak istiyorsanız, bunu en son katmanda yapmanız gerekir.

Dinamik görüntüler

Kompozisyon, kabın boyutuna bağlı olmaktan daha fazla statik veya dinamik değilse, o zaman birden fazla arka plan, sayfa tasarımını açıkça basitleştirir. Ancak, kompozisyonun ayrı ayrı öğeleriyle javascript'ten (hareket, kaydırma, vb.) bağımsız olarak çalışmanız gerekiyorsa ne olur?

Bu arada, işte gerçek hayattan bir örnek - Yandex'de karahindibalı bir tema:


Kodun içine girerseniz, aşağıdakine benzer bir şey göreceksiniz:

...

"b-fluff-bg", "b-fluff__cloud" ve "b-fluff__item" sınıflarına sahip bloklar, birbiriyle örtüşen arka plan resimleri içerir. Ayrıca, bulutlu arka plan sürekli kayar ve ekranda karahindibalar uçar.

Bu, birden fazla arka plan kullanılarak yeniden yazılabilir mi? Prensip olarak, evet, ancak 1) hedef tarayıcılarda bu özellik için destek sağlandı ve ... 2) okumaya devam edin;)

Birden çok arka plana nasıl hoparlör eklerim? Böyle bir durumda, dahili görünümde tarayıcının arka plan görüntüsünün bireysel parametrelerini uygun kurallara göre dağıtmasının uygun olduğu ortaya çıkıyor. Örneğin, konumlandırma için bir "arka plan konumu" vardır ve ofsetler için yalnızca değiştirmeniz gerekir. Ancak, birden fazla resim kullanmak ücretlidir - bu kural (ve benzer herhangi bir kural), bloğunuz için ayarlanan tüm arka planlar için konumu listelemelidir ve bunu seçici olarak yapamazsınız.

Balıklı arka planımıza animasyon eklemek için aşağıdaki kodu kullanabilirsiniz:
$ (belge) .ready (fonksiyon () (var deniz = $ (".örnek5 .deniz"); var balıklarX = 30; var balıklarY = 90; var balıkX = 0; var balıkY = 0; var deniz kızıX = 0; var t = 0; function canlandırmaDöngüsü () (fishesY = 90 + Math.floor (30 * Math.sin (t ++ / 180.0)); if (- fishesX< 0) fishesX = 480; mermaidX += 0.5; if(mermaidX >480) deniz kızıX = 0; balıkY = -10 + (10 * Math.cos (t * 0.091)); balıkX = 10 + (5 * Math.sin (t * 0.07)); sea.style.backgroundPosition = "üst" + balıkY + "px sağ" + balıkX + "px," + deniz kızıX + "alt piksel" + balıklarX + "px" + balıklarY + "px, sol üst"; window.requestAnimFrame (animasyonDöngüsü); ) animasyonDöngüsü (); ));
nerede
window.requestAnimFrame = (function () (dönüş window.requestAnimationFrame || window.msRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.webkitRequestAnimationFrame || (işlev (geri arama))) (60 );) );

Ve bu arada CSS3 Transitions/Animations üzerinden de animasyonlar yapılabilir ama bu ayrı bir tartışma konusu.

Paralaks ve etkileşimli

Son olarak, benzer manevralarla, arka planla kolayca paralaks efektleri veya etkileşimli etkileşim ekleyebilirsiniz:

Birden çok arka plan resmi bu tür senaryolarda kullanışlıdır, çünkü yalnızca arka plandan (içerik değil) bahsediyor olsak da, bunları kullanmak html kodunuzu ve DOM'yi karmaşık hale getirmekten kaçınmanıza olanak tanır. Ama her şeyin bir bedeli var: Tek tek kompozisyon öğelerine ada, kimliğe, sınıfa veya başka herhangi bir parametreye göre erişemiyorum. Koddaki bileşimdeki öğelerin sırasını açıkça hatırlamalıyım ve herhangi bir öğenin herhangi bir parametresindeki her değişiklik için, aslında, tüm öğeler için bu parametrenin değerlerini açıklayan satırı yapıştırmalı ve güncellemeliyim. tüm kompozisyon.

Sea.style.backgroundPosition = "üst" + balıkY + "px sağ" + balıkX + "px," + denizkızıX + "alt piksel" + balıklarX + "px" + balıklarY + "px, sol üst";

Bunun, sayfanın html kodunu olabildiğince temiz bırakırken, tek tek katmanlarla ilişkilerin sanallaştırılmasını devralacak uygun javascript koduna sarılabileceğinden eminim.

Uyumluluk ne durumda?

IE9 + dahil olmak üzere popüler tarayıcıların tüm modern sürümleri birden fazla görüntüyü destekler (örneğin, caniuse ile kontrol edebilirsiniz).

Modernizr'i, birden fazla arka planı desteklemeyen tarayıcılara alternatifler sağlamak için de kullanabilirsiniz. Chris Coyier'in birden fazla arka plan kullanırken katman düzeniyle ilgili notunda yazdığı gibi, şöyle bir şey yapın:

Multiplebgs gövdesi (/ * Gerçeği aşan ve civcivleri kaynaksız bırakan harika çoklu BG bildirimleri * /) .no-multiplebgs gövdesi (/ * laaaaaame geri dönüş * /)
Geriye dönük uyumluluk sağlamak için JS'yi kullanma konusunda kafanız karıştıysa, arka planı iki kez bildirmeniz yeterlidir, ancak bunun da kaynakların olası çift yüklenmesi şeklinde dezavantajları vardır (bu, belirli bir tarayıcıda css işlemenin uygulanmasına bağlıdır):

/ * çoklu arka plan yedeği * / arka plan: # 000 url (...) ...; / * Gerçekliği aşan ve civcivleri kaynaksız bırakan harika çoklu BG bildirimleri * / arka plan url (...), url (...), url (...), # 000 url (...);

Windows 8 hakkında düşünmeye başladıysanız, aynı motor IE10'da olduğu gibi dahili olarak kullanıldığından, metro tarzı uygulamalar geliştirirken birden fazla arka plan kullanabileceğinizi unutmayın.

not Konuyla ilgili: Yardım edemem ama hakkında olağanüstü makaleyi hatırlıyorum

CSS 2'de, bir öğeye aynı anda iki arka plan eklemek gerçekçi değildir, bu nedenle bir öğeyi diğerinin içine yerleştirmeniz ve her biri için kendi arka plan görüntüsünü ayarlamanız gerekir. Karmaşık düzenler için, bu tür ekler bazen bir düzine kadar sayılabilir. Böyle bir yığının iyi bir şeye yol açmadığı açıktır, ama ne yapmalı? Bir şey olduğu ortaya çıktı! CSS 3'te birden fazla ekleyebilirsiniz arka plan resimleri herhangi bir öğe için. Bu yüzden bir blok çizim alıyoruz (Şekil 1), parçalara ayırıyoruz ve tarayıcılarda test etmeye başlıyoruz.

Pirinç. 1. Site için engelle

Basit olması için, bloğun genişliğini sabit bir boyut olarak alacağım ve içeriğe bağlı olarak yükseklik uzayacak. Şekil üst ve alt kısımları açıkça gösteriyor, editörde kesip ayrı bir dosyada katmanlar halinde katladım. Orta kısım dikişsiz dikey olarak tekrarlanacak şekilde seçilmelidir. Çizimin iyi tanımlanmış bir tekrarlama modeli vardır, bu nedenle seçimde herhangi bir zorluk olmamalıdır. Kopyala ve önceki snippet'lere yapıştır. Sonuç olarak, böyle bir resim elde edeceksiniz (Şekil 2).

Pirinç. 2. Hazırlanan görüntüler

Temel olarak, her bir parçayı şu şekilde kaydetmek mümkündür: ayrı bir dosya, ancak CSS sprite'larının (bu, birkaç görüntüyü tek bir görüntüye yapıştırma teknolojisinin adıdır) bir takım avantajlara sahiptir. İlk olarak, dosya sayısındaki azalma nedeniyle sunucuya gelen istek sayısı azalır ve ikincisi, toplamdaki rakamlar daha hızlı yüklenir ve görüntülenir.

Arka planın kendisi arka plan özelliği tarafından görüntülenir, ayrıca istenen parçanın koordinatlarını da ayarlar. Her arka planın parametreleri virgülle ayrılmış olarak listelenir ve bu durumda sıraları önemlidir. Bloğun üst ve alt kısımlarının üst üste gelmemesini istiyorum, bu yüzden onları ilk sıraya koydum (örnek 1).

Örnek 1. Birden çok arka plan resmi

HTML5 CSS2.1 CSS3 IE 8 IE 9 Cr Op Sa Fx

İlk arka plan kutunun üst kenarlığını, ikinci arka plan altını ve üçüncü arka plan dikey kenarlıkları çizer.

Tarayıcılarda kontrol ediliyor. Internet Explorer 8 hiç görüntü göstermedi, diğer tarayıcılar (IE 9, Opera 10.60, Firefox 3.6, Chrome 5, Safari 5) çerçeveyi doğru görüntüledi (Şekil 3).

Pirinç. 3. Çerçevenin Safari tarayıcısında görünümü

Birden fazla arka plan kullanmak, özellikle düzen blokları olduğunda, geliştiriciler için durumu çok daha kolay hale getirir. Sadece küçük bir şey kaldı. IE 6-8 tarayıcısının varlığının sona ermesi gerekiyor.