Arka plan görüntüsünü ve opaklığı aynı özellikte ayarlayabilir miyim?

CSS referanslarında görüntü saydamlığının nasıl ayarlanacağını ve arka plan görüntüsünün nasıl ayarlanacağını görebiliyorum. Ancak şeffaf bir arka plan resmi ayarlamak için bu ikisini nasıl birleştirebilirim?

Arka plan olarak kullanmak istediğim bir resim var, ancak çok parlak - opaklığı yaklaşık 0,2'ye düşürmek istiyorum. Bunu nasıl yapabilirim?

#main {
    background-image: url(/wp-content/uploads/2010/11/tandem.jpg); 
}
TylerH
Edited question 2019ösp11ös20 Ocak 2019 в 8:11
Programlama
css
2010ööp37öö11 Kasım 2010 в 11:37
2 görünümler
#main {
    position: relative;
}
#main:after {
    content : "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    background-image: url(/wp-content/uploads/2010/11/tandem.jpg); 
    width: 100%;
    height: 100%;
    opacity : 0.2;
    z-index: -1;
}
Nisse Engström
Edited answer 2018ösp1ös22 Eylül 2018 в 10:01
Yorumlar (11)
Çözüm

İki yöntem:

  1. PNG'ye dönüştürün ve orijinal görüntüyü 0,2 opaklık yapın
  2. (Daha iyi yöntem) #mainden önce position: absolute; olan ve #main ile aynı yükseklikte olan bir <div>ye sahip olun, ardından background-image ve opacity: 0.2; filter: alpha(opacity=20); uygulayın.
TylerH
Edited answer 2014ösp54ös14 Eylül 2014 в 2:54
Yorumlar (4)

Yalnızca arka plan saydamlığı yapmanın tek CSS yolu RGBa kullanmaktır, ancak bir resim kullanmak istediğiniz için Photoshop veya Gimp kullanarak resmi saydam hale getirmenizi ve ardından arka plan olarak kullanmanızı öneririm.

Yorumlar (2)