Alt öğelerin opaklığını etkilemeden arka plan görüntüsünün opaklığını ayarlamak mümkün müdür?

Misal

Altbilgideki tüm bağlantıların özel bir madde işaretine (arka plan resmi) ihtiyacı vardır ve özel madde işaretinin opaklığı% 50 olmalıdır.

HTML

<div id="footer">
    <ul>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
        <li><a href="#">Link 4</a></li>
        <li><a href="#">Link 5</a></li>
    </ul>
</div>  

CSS

#footer ul li {
    background: url(/images/arrow.png) no-repeat 0 50%;
}  

Ne Denedim

Liste öğelerinin opaklığını% 50 olarak ayarlamaya çalıştım, ancak daha sonra bağlantı metninin opaklığı da% 50 - ve alt öğelerin opaklığını sıfırlamanın bir yolu yok gibi görünüyor:

#footer ul li {
    background: url(/images/arrow.png) no-repeat 0 50%;
    /* will also set the opacity of the link text */        
    opacity: 0.5;
}

Ayrıca rgba kullanmayı denedim, ancak arka plan görüntüsü üzerinde herhangi bir etkisi yoktur:

#footer ul li {
    /* rgba doesn't apply to the background image */
    background: rgba(255, 255, 255, 0.5) url(/images/arrow.png) no-repeat 0 50%;
}

Sen CSS kullanabilirsiniz linear-gradient()ile rgba().

div {
  width: 300px;
  height: 200px;
  background: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,.5)), url("https://i.imgur.com/xnh5x47.jpg");
}
span {
  background: black;
  color: white;
}

<div><span>Hello world.</span></div>

Resminizi bir resim düzenleyicisine alın, opaklığı azaltın, bir .png olarak kaydedin ve bunun yerine kullanın.

Bu, her tarayıcıda çalışır

div {
 -khtml-opacity:.50; 
 -moz-opacity:.50; 
 -ms-filter:"alpha(opacity=50)";
  filter:alpha(opacity=50);
  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.5);
  opacity:.50; 
}

Şeffaflığın tüm kapsayıcıyı ve alt öğelerini etkilemesini istemiyorsanız, bu geçici çözümü denetleyin. Göreceli olarak konumlandırılmış bir ebeveyni olan kesinlikle konumlandırılmış bir çocuğunuz olmalıdır.

Demoyu http://www.impressivewebs.com/css-opacity-that-doesnt-affect-child-elements/ adresinden kontrol edin.

Görüntüyü madde işareti olarak kullanıyorsanız: before sözde öğesi olarak düşünebilirsiniz.

#footer ul li {
}

#footer ul li:before {
    content: url(/images/arrow.png);
    filter:alpha(opacity=50);
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.5);
    opacity:.50;
}

Görüntüyü div: after veya div: before dizinine yerleştirebilir ve "sanal div" öğesinde opaklığı ayarlayabilirsiniz

div:after {
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/owl1.jpg);
  opacity: 0.25;
}

burada bulundu http://css-tricks.com/snippets/css/transparent-background-images/

#footer ul li {
  position: relative;
  opacity: 0.99;
}

#footer ul li::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -1;
  background: url(/images/arrow.png) no-repeat 0 50%;
  opacity: 0.5;
}

Opaklık .99 (1'den az) ile kesmek, z-endeksi içeriği oluşturur, böylece global z-endeksi değerleri hakkında endişelenemezsiniz. (Kaldırmaya çalışın ve üst paketin pozitif z-endeksine sahip olduğu bir sonraki demoda neler olduğunu görün.)
Öğenizde zaten z-endeksi varsa, bu saldırıya ihtiyacınız yoktur.

Bu tekniğin demosu .

Ne yazık ki, bu cevabı yazarken, bunu yapmanın doğrudan bir yolu yoktur . Gerek:

1. arka plan için yarı saydam bir resim kullanın (çok daha kolay).
2. opak olmasını istediğiniz çocukların yanına ekstra bir öğe (div gibi) ekleyin, arkaplana ekleyin ve yarı saydam hale getirdikten sonra, belirtilen çocukların arkasına yerleştirin.

Başka bir seçenek, aradığımız opak arka plan efektini taklit etmek için sahte bir öğeyi tam arkasındaki orijinal öğenin tam boyutuna yerleştirmek için CSS Tricks yaklaşımıdır. Bazen sözde eleman için bir yükseklik ayarlamanız gerekebilir.

div {
  width: 200px;
  height: 200px;
  display: block;
  position: relative;
}

div::after {
  content: "";
  background: url(image.jpg);
  opacity: 0.5;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;   
}

"Filter" özelliği, IE7 / 8 için çalışabilmek için opaklık yüzdesi için çift yerine bir tamsayıya ihtiyaç duyar.

filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);

Not: Bunu cevap olarak gönderiyorum, çünkü SO, bir düzenleme için en az 6 değiştirilmiş karaktere ihtiyaç duyuyor.

Gerçekten ince ayar yapmak için tarayıcı hedefleme sarmalayıcılarına uygun seçimleri koymanızı öneririm. IE7 ve IE8'i "başkalarıyla güzel oynamak" için alamadığımda benim için çalışan tek şeydi (şu anda onları desteklemeye devam eden bir yazılım şirketi için çalışıyorum).

/* color or background image for all browsers, of course */            
#myBackground {
    background-color:#666; 
}
/* target chrome & safari without disrupting IE7-8 */
@media screen and (-webkit-min-device-pixel-ratio:0) {
    #myBackground {
        -khtml-opacity:.50; 
        opacity:.50;
    }
}
/* target firefox without disrupting IE */
@-moz-document url-prefix() {
    #myBackground {
        -moz-opacity:.50;
        opacity:0.5;
    }
}
/* and IE last so it doesn't blow up */
#myBackground {
    opacity:.50;
    filter:alpha(opacity=50);
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.5);
}

Yukarıdaki kodda fazlalıklar olabilir - kimse daha fazla temizlemek istiyorsa, çekinmeyin!

Opaklığı yalnızca madde işaretine ayarlamanız gerekiyorsa, neden alfa kanalını doğrudan görüntüye ayarlamıyorsunuz? Bu arada, tüm öğenin (ve alt öğelerinin) opaklığını değiştirmeden opaklığı css üzerinden bir arka plan görüntüsüne ayarlamanın bir yolu olduğunu düşünmüyorum.

Sadece yukarıdakilere eklemek için ... alfa kanalını yeni renk nitelikleriyle kullanabilirsiniz. rgba (0,0,0,0) tamam bu yüzden siyah ama sıfır opaklıkla ebeveyn olarak çocuğu etkilemeyecek. Bu sadece Chrome, FF, Safari ve .... üzerinde çalışıyor.

onaltılık renklerinizi RGBA'ya dönüştürün

Bu konuda oldukça iyi ve basit bir öğretici buldum. Bence harika çalışıyor (ve IE'yi desteklese de, müşterilerime diğer tarayıcıları kullanmasını söylüyorum):

RGBa ve filtreler aracılığıyla alt öğeleri etkilemeden CSS arka plan saydamlığı

Oradan degrade desteği vb. Ekleyebilirsiniz.

#footer ul li
     {
       position:relative;
       list-style:none;
     }
    #footer ul li:before
     {
       background-image: url(imagesFolder/bg_demo.png);
       background-repeat:no-repeat;
       content: "";
       top: 5px;
       left: -10px;
       bottom: 0;
       right: 0;
       position: absolute;
       z-index: -1;
       opacity: 0.5;
    }

Bu kodu deneyebilirsiniz. Bence işe yarayacak. Demoyu ziyaret edebilirsiniz