Czy można ustawić krycie obrazu tła bez wpływu na krycie elementów potomnych?

Przykład

Wszystkie linki w stopce wymagają niestandardowego punktora (obrazu tła), a krycie niestandardowego punktu powinno wynosić 50%.

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%;
}  

Co próbowałem

Próbowałem ustawić krycie elementów listy na 50%, ale potem krycie tekstu linku również wynosi 50% - i wydaje się, że nie ma sposobu na zresetowanie krycia elementów potomnych:

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

Próbowałem także użyć rgba, ale nie ma to żadnego wpływu na obraz tła:

#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%;
}

Możesz używać CSS linear-gradient()z 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>

Przenieś obraz do edytora obrazów, zmniejsz krycie, zapisz go jako plik .png i użyj go zamiast tego.

Będzie to działać z każdą przeglądarką

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; 
}

Jeśli nie chcesz, aby przezroczystość wpływała na cały kontener i jego dzieci, sprawdź to obejście. Musisz mieć dziecko o absolutnej pozycji z rodzicem o względnej pozycji.

Sprawdź wersję demo na http://www.impressivewebs.com/css-opacity-that-doesnt-affect-child-elements/

Jeśli używasz obrazu jako punktora, możesz rozważyć pseudoelement: before.

#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;
}

Możesz umieścić obraz w div: after lub div: before i ustawić krycie na tym „wirtualnym div”

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

znaleziono tutaj 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;
}

Hack z kryciem 0,99 (mniej niż 1) tworzy kontekst indeksu Z, więc nie możesz się martwić o globalne wartości indeksu Z. (Spróbuj go usunąć i zobacz, co się stanie w następnej wersji demonstracyjnej, w której opakowanie nadrzędne ma dodatni indeks Z).
Jeśli twój element ma już indeks Z, to nie potrzebujesz tego hacka.

Demo tej techniki .

Niestety w chwili pisania tej odpowiedzi nie ma bezpośredniego sposobu, aby to zrobić. Musisz:

1. użyj półprzezroczystego obrazu jako tła (znacznie łatwiej).
2. dodaj dodatkowy element (np. div) obok dzieci, które mają być nieprzezroczyste, dodaj tło i po uczynieniu go półprzezroczystym, umieść go za wspomnianymi dziećmi.

Inną opcją jest podejście CSS Tricks polegające na wstawieniu pseudoelementu dokładnego rozmiaru oryginalnego elementu tuż za nim, aby uzyskać fałszywy efekt nieprzezroczystego tła, którego szukamy. Czasami trzeba ustawić wysokość pseudoelementu.

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;   
}

Właściwość „filter” wymaga liczby całkowitej dla procentowego krycia zamiast podwójnego, aby działała w IE7 / 8.

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

PS: Publikuję to jako odpowiedź, ponieważ SO potrzebuje co najmniej 6 zmienionych znaków do edycji.

Aby naprawdę dostroić rzeczy, zalecam umieszczenie odpowiednich opcji w opakowaniach kierowanych na przeglądarkę. To była jedyna rzecz, która działała dla mnie, gdy nie mogłem zmusić IE7 i IE8 do „ładnej zabawy z innymi” (ponieważ obecnie pracuję dla firmy programistycznej, która nadal je wspiera).

/* 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);
}

Mogę mieć zwolnienia w powyższym kodzie - jeśli ktoś chce go dalej posprzątać, nie krępuj się!

Jeśli musisz ustawić krycie tylko na punktor, dlaczego nie ustawisz kanału alfa bezpośrednio na obrazie? Nawiasem mówiąc, nie sądzę, że istnieje sposób, aby ustawić krycie obrazu tła za pomocą css bez zmiany krycia całego elementu (i jego dzieci również).

Aby dodać do powyższego ... możesz użyć kanału alfa z nowymi atrybutami kolorów, np. rgba (0,0,0,0) ok, więc jest czarny, ale z zerowym kryciem, więc jako rodzic nie wpłynie na dziecko. Działa to tylko w Chrome, FF, Safari i .... ja cienki O.

przekonwertować kolory heksadecymalne na RGBA

Znalazłem całkiem niezły i prosty samouczek na temat tego problemu. Myślę, że działa świetnie (i chociaż obsługuje IE, po prostu mówię moim klientom, aby używali innych przeglądarek):

Przezroczystość tła CSS bez wpływu na elementy potomne, poprzez RGBa i filtry

Stamtąd możesz dodać obsługę gradientów itp.

#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;
    }

Możesz wypróbować ten kod. Myślę, że to zadziała. Możesz odwiedzić wersję demonstracyjną