Çoklu Arka Plan Sözdizimi - CSS Hileleri

İçindekiler

Birden çok arka planı destekleyen tarayıcılar (ilk günlerden WebKit, Firefox 3+) aşağıdaki gibi bir sözdizimi kullanır:

#box ( background: url(icon.png.webp) top left no-repeat, url(texture.jpg.webp), url(top-edge.png.webp) top left repeat-y; )

Virgülle ayrılmış değerlerdir ve farklı URL'ler, konumlandırma ve tekrarlama değerleriyle istediğiniz kadar olabilir. Hatta WebKit degradelerini karışımda birleştirebilirsiniz:

#box ( background: url(… /images/arrow.png.webp) 15px center no-repeat, -webkit-gradient(linear,left top,left bottom,color-stop(0, #010101),color-stop(1, #181818)); )

Mac'teki eski okul IE, listedeki ilk arka planı görüntülerdi, ancak onu desteklemeyen diğer tarayıcılar çok başarısız oluyor ve arka planı göstermiyor. Bu, aşamalı geliştirme için zor bir durumdur. Diğer bir deyişle, desteği algılamak için Modernizr gibi bir araç kullanmadığınız ve desteklemeyen tarayıcılar için yalnızca bir arka plan bildiren bir geri dönüş seçici yazmadığınız sürece.

Ilginç makaleler...