Вы можете использовать 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/

Если вы используете изображение в качестве маркера, вы можете рассмотреть псевдоэлемент: 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;
}

Вы можете поместить изображение в div: after или div: before и установить непрозрачность этого «виртуального 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);

P.S .: Я отправляю это как ответ, так как SO нужно как минимум 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 и .... Мне кажется, O.

преобразовать ваши шестнадцатеричные цвета в RGBA

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

Фон CSS прозрачность без влияния на дочерние элементы с помощью RGBa и фильтров

Оттуда вы можете добавить поддержку градиента и т. Д.

мы можем выяснить это, не играя с непрозрачностью, просто используя цвет rgba

e.g "background-color: rgba(0,0,0, 0.5)"

Образец :

Предыдущий CSS:

 .login-card {
  // .... others CSS
  background-color: #121e1b;
  opacity: 0.5;
}

Кому:

 .login-card {
      // .... others CSS
      background-color: rgba(0, 0, 0, 0.5);
    }

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

Вы можете попробовать этот код. Думаю, получится. Вы можете посетить демонстрацию