Чи можна встановити непрозорість фонового зображення, не впливаючи на непрозорість дочірніх елементів?

Приклад

Для всіх посилань у нижньому колонтитулі потрібна спеціальна куля (фонове зображення), а непрозорість спеціальної кулі повинна становити 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%;
}  

Що я пробував

Я спробував встановити непрозорість елементів списку на 50%, але тоді непрозорість тексту посилання також становить 50% - і, здається, не існує способу скинути непрозорість дочірніх елементів:

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

Я також спробував використовувати rgba, але це не впливає на фонове зображення:

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

Ви можете використовувати CSS за linear-gradient()допомогою 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>

Візьміть своє зображення в редактор зображень, зменшіть непрозорість, збережіть його як .png і використовуйте це замість цього.

Це працюватиме з кожним браузером

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

Якщо ви не хочете, щоб прозорість впливала на весь контейнер та його дітей, перевірте це рішення. У вас повинна бути абсолютно розташована дитина з відносно розташованим батьком.

Перевірте демонстрацію на веб- сайті http://www.impressivewebs.com/css-opacity-that-doesnt-affect-child-elements/

Якщо ви використовуєте зображення як кулю, ви можете розглянути: перед псевдоелементом.

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

Ви можете помістити зображення в div: after або div: before і встановити непрозорість для цього "virtual div"

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

знайдено тут 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;
}

Злом з непрозорістю .99 (менше 1) створює контекст z-індексу, тому ви не можете турбуватися про глобальні значення z-індексу. (Спробуйте видалити його і подивіться, що станеться в наступній демонстрації, коли батьківська обгортка має позитивний z-індекс.)
Якщо ваш елемент вже має z-індекс, то цей хак вам не потрібен.

Демонстрація цієї методики .

На жаль, на момент написання цієї відповіді прямого способу це не існує. Тобі потрібно:

1. використовувати напівпрозоре зображення для фону (набагато простіше).
2. додайте додатковий елемент (наприклад, div) поруч із дітьми, яких ви хочете непрозорі, додайте до нього фон і після того, як зробити його напівпрозорим, розташуйте його за згаданими дітьми.

Інший варіант - підхід CSS Tricks - вставити псевдоелемент точного розміру вихідного елемента прямо за ним, щоб підробити непрозорий фоновий ефект, який ми шукаємо. Іноді вам потрібно буде встановити висоту для псевдоелемента.

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" потрібно ціле число для відсотка непрозорості замість подвійного, щоб працювати для IE7 / 8.

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

PS: Я публікую це як відповідь, оскільки ТАК потребує щонайменше 6 змінених символів для редагування.

Щоб дійсно точно налаштувати речі, рекомендую розмістити відповідні виділення в обгортках, орієнтованих на браузер. Це було єдине, що працювало для мене, коли я не міг отримати IE7 та IE8, щоб «чудово грати з іншими» (так як я зараз працюю в програмній компанії, яка продовжує їх підтримувати).

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

У вищезазначеному коді у мене можуть бути надлишки - якщо хтось бажає його ще прибирати, не соромтеся!

Якщо вам потрібно встановити непрозорість лише кулі, чому б вам не встановити альфа-канал безпосередньо в зображення? До речі, я не думаю, що існує спосіб встановити непрозорість фонового зображення за допомогою css, не змінюючи непрозорість всього елемента (і його дітей також).

Просто для доповнення до вищезазначеного ... ви можете використовувати альфа-канал з новими атрибутами кольорів, наприклад. rgba (0,0,0,0) ок, це чорний колір, але з нульовою непрозорістю, так що для батьків це не вплине на дитину. Це працює лише на Chrome, FF, Safari і .... Я худі О.

конвертувати свої шістнадцяткові кольори в RGBA

Я знайшов досить хороший і простий підручник з цього питання. Я думаю, що це чудово працює (і хоча він підтримує IE, я просто кажу своїм клієнтам використовувати інші браузери):

Прозорість фону CSS, не впливаючи на дочірні елементи, через RGBa та фільтри

Звідти ви можете додати градієнтну підтримку тощо.

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

Ви можете спробувати цей код. Я думаю, це буде спрацювати. Ви можете відвідати демонстрацію