Установите непрозрачность фонового изображения, не затрагивая дочерние элементы

Question

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

Пример

Все ссылки в нижнем колонтитуле должны иметь пользовательский маркер (фоновое изображение), а непрозрачность пользовательского маркера должна составлять 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%;
}

Answer 1

Перенесите изображение в редактор изображений, уменьшите прозрачность, сохраните его в формате .png и используйте его вместо этого.

Answer 2

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

Answer 3

Это будет работать с каждым браузером

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/

Answer 4

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

Answer 5

Вы можете поместить изображение в 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 / прозрачный-фон-изображения /

Answer 6

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

Хак с непрозрачностью 0,99 (меньше 1) создает контекст z-index, поэтому вы можете не беспокоиться о глобальных значениях z-index.(Попробуйте удалить его и посмотрите, что произойдет в следующей демонстрации, где родительская обертка имеет положительный z-индекс.)
Если у вашего элемента уже есть z-индекс, этот хак вам не нужен. Демонстрация этой техники .

Answer 7

К сожалению, на момент написания этого ответа не было прямого способа сделать это.Вам необходимо:

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

Answer 8

Свойству «filter» необходимо целое число в процентах непрозрачности вместо double, чтобы работать в IE7 / 8.

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

PS: я публикую это как ответ, так как SOдля редактирования нужно как минимум 6 измененных символов.

Answer 9

Для точной настройки я рекомендую размещать соответствующие настройки в оболочках, ориентированных на браузер.Это было единственное, что сработало для меня, когда я не мог заставить 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);
}

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

Answer 10

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

Прозрачность фона CSS без влияния на дочерние элементы, через RGBa и фильтры

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