Benim için CSS3 geçişlerini kullanmak background-color istiyorum ve daha sonra background-image ışık saydam bir doku çeşit uygulamak için Uygula.

Bu mümkün mü?

Evet, öyle.

body {
  background: #6cab26;
  background-image: url(IMAGE_URL); /* fallback */
  background-image: url(IMAGE_URL), -webkit-gradient(linear, left top, left bottom, from(#6cab26), to(#6ceb86)); /* Saf4 , Chrome */
  background-image: url(IMAGE_URL), -webkit-linear-gradient(top, #6cab26, #6ceb86); /* Chrome 10 , Saf5.1  */
  background-image: url(IMAGE_URL),    -moz-linear-gradient(top, #6cab26, #6ceb86); /* FF3.6  */
  background-image: url(IMAGE_URL),      -o-linear-gradient(top, #6cab26, #6ceb86); /* Opera 11.10  */
  background-image: url(IMAGE_URL),         linear-gradient(to bottom, #6cab26, #6ceb86); /* W3C */
}

Bu 2 satır geçişlerini yapmak istemediği herhangi bir tarayıcı için geri dönüş. İstifleme görüntüler için notlar sadece IE < 9 aşağıda.

• Hat 1 düz bir arka plan rengini ayarlar.
• Hat 2 arka plan görüntüsü geri dönüş ayarlar.

Geri kalan arka plan görüntüsü ayarlamak ve belirli tarayıcılar için degrade.

• 3 satır çok eski y tarayıcılar için.
• Hat 4 eski y tarayıcılar (Safari 5.1-6, iOS 5.1-6.1 Safari).
• Hat 5 ile 15 Firefox 3.6 için.
• Line 6 Opera için 11.5-12.
• Satır 7 tüm nispeten modern tarayıcılar için.

Tarayıcı desteği ve önek için http://caniuse.com/#feat=css-gradients bkz.

Arka plan katman hakkında daha fazla bilgi için http://www.w3.org/TR/css3-background/#layering bkz.

SADECE görüntüleri istifleme (bildiriminde hayır geçişlerini YANİ < 9

9 ve görüntüler yığını aynı bu şekilde. Bu Internet Explorer 9, ama şahsen ben etmem için degrade bir resim oluşturmak için kullanabilirsiniz. Sadece görüntü, yani < kullanırken dikkat edilmesi gereken ancak; 9 geri dönüş bildirimi görmezden ve herhangi bir görüntü değil. Bu degrade dahil olduğunda durum değil. Bu durumda tek çare bir resim kullanmak için öneririm Paul İrlandalı kullanarak harika Conditional HTML element geri dönüş kodu ile birlikte

.lte9 #target{ background-image: url(IMAGE_URL); }

Arka plan konumu, boyutlandırma vb.

Tek bir resim için geçerli olacak, diğer özellikleri de virgülle ayrılmış olabilir. Eğer sadece 1 değeri verilirse, hepsi yığılmış görüntüleri degrade dahil olmak üzere uygulanacak. background-size: 40px; görüntü ve 40px yükseklik ve genişlik için degrade hem sınırlamak. Ancak background-size: 40px, cover; kullanarak görüntü 40px yapacak ve degrade unsur gizli.

Aynı arka plan-konum, arka plan-tekrar ediyorum, vb için geçerlidir.