Bir arka plan görüntüsünü ve CSS3 gradyanını aynı öğede nasıl birleştirebilirim?

CSS3 gradyanlarını arka plan rengim için nasıl kullanabilirim ve ardından bir çeşit hafif şeffaf doku uygulamak için bir arka plan görüntüsü nasıl uygulayabilirim?

John
Edited question 2016ösp16ös22 Şubat 2016 в 10:16
Programlama
css3 gradient css background-image
2010ösp30ös22 Mart 2010 в 10:30
28 görünümler
Çözüm

Çoklu arka planlar!

body {
  background: #eb01a5;
  background-image: url("IMAGE_URL"); /* fallback */
  background-image: url("IMAGE_URL"), linear-gradient(#eb01a5, #d13531); /* W3C */
}

Bu 2 satır, degradeleri yapmayan herhangi bir tarayıcı için yedektir. Aşağıda yalnızca IE < 9 için resim yığma notlarına bakın.

  • Satır 1 düz bir arka plan rengi ayarlar.
  • Satır 2, arka plan görüntüsü geri dönüşünü ayarlar.

Son satır, bunları işleyebilen tarayıcılar için bir arka plan görüntüsü ve gradyan ayarlar.

  • Satır 3 tüm nispeten modern tarayıcılar içindir.

Neredeyse tüm mevcut tarayıcılar birden fazla arka plan görüntüsü ve css arka planı için desteğe sahiptir. Tarayıcı desteği için http://caniuse.com/#feat=css-gradients adresine bakın. Neden birden fazla tarayıcı önekine ihtiyacınız olmadığına dair iyi bir yazı için bkz. http://codepen.io/thebabydino/full/pjxVWp/

Katman Yığını

İlk tanımlanan görüntünün yığının en üstünde olacağına dikkat edilmelidir. Bu durumda, görüntü degradenin ÜST kısmındadır.

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

IE < 9 için SADECE görüntüleri yığınlama (bildirimde gradyan yok)

IE9 ve üstü aynı şekilde görüntüleri yığabilir. Bunu ie9 için degrade bir görüntü oluşturmak için kullanabilirsiniz, ancak kişisel olarak ben yapmazdım. Ancak sadece resim kullanıldığında, ie < 9 geri dönüş ifadesini yok sayacak ve herhangi bir resim göstermeyecektir. Bir degrade dahil edildiğinde bu gerçekleşmez. Bu durumda tek bir geri dönüş resmi kullanmak için geri dönüş kodunuzla birlikte Paul Irish'in harika Koşullu HTML öğesini kullanmanızı öneririm:

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

Arka plan konumu, boyutlandırma vb.

Tek bir resim için geçerli olacak diğer özellikler de virgülle ayrılabilir. Yalnızca 1 değer verilirse, bu değer degrade dahil tüm yığılmış görüntülere uygulanır. 'background-size: 40px;hem görüntüyü hem de degradeyi 40 piksel yükseklik ve genişlikle sınırlayacaktır. Ancakbackground-size: 40px, cover;kullanıldığında görüntü 40 piksel olur ve degrade öğeyi kaplar. Bir ayarı yalnızca bir görüntüye uygulamak için, diğeri için varsayılanı ayarlayın:background-position: 50%, 0 0;veya [destekleyen tarayıcılar](http://caniuse.com/#feat=css-initial-value) içininitialkullanın:background-position: 50%, initial;`

Arka plan kısaltmasını da kullanabilirsiniz, ancak bu geri dönüş rengini ve görüntüsünü kaldırır.

body{
    background: url("IMAGE_URL") no-repeat left top, linear-gradient(#eb01a5, #d13531);
}

Aynı durum background-position, background-repeat vb. için de geçerlidir.

Gidgidonihah
Edited answer 2017ööp31öö24 Mart 2017 в 12:31
Yorumlar (29)

Dikkat edilmesi gereken bir husus, ilk tanımlanan arka plan resminin yığının en üstünde olduğudur. Son tanımlanan görüntü en altta olacaktır. Bu, bir görüntünün arkasında bir arka plan gradyanı olması için şunlara ihtiyacınız olacağı anlamına gelir:

  body {
    background-image: url("http://www.skrenta.com/images/stackoverflow.jpg"), linear-gradient(red, yellow);
    background-image: url("http://www.skrenta.com/images/stackoverflow.jpg"), -webkit-gradient(linear, left top, left bottom, from(red), to(yellow));
    background-image: url("http://www.skrenta.com/images/stackoverflow.jpg"), -moz-linear-gradient(top, red, yellow);
  }

Ayrıca görüntüler için arka plan konumlarını ve arka plan boyutunu da tanımlayabilirsiniz. CSS3 gradyanları]1 ile yapabileceğiniz bazı ilginç şeyler hakkında bir blog yazısı hazırladım.

Ruslan López
Edited answer 2015ösp8ös17 Mayıs 2015 в 5:08
Yorumlar (5)

Ben de aynı şeyi yapmaya çalışıyordum. Arka plan rengi ve arka plan görüntüsü bir nesne içinde ayrı katmanlarda bulunurken - yani birlikte var olabilirken - CSS gradyanları arka plan görüntüsü katmanını birlikte seçiyor gibi görünüyor.

Söyleyebileceğim kadarıyla, border-image çoklu arka planlardan daha geniş bir desteğe sahip gibi görünüyor, bu yüzden belki bu alternatif bir yaklaşım olabilir.

http://articles.sitepoint.com/article/css3-border-images

GÜNCELLEME: Biraz daha araştırma. Görünüşe göre Petra Gregorova'nın burada çalışan bir şeyi var --> http://petragregorova.com/demos/css-gradient-and-bg-image-final.html

Alex
Edited answer 2011ööp37öö4 Şubat 2011 в 4:37
Yorumlar (1)