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

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

Пример

Для всех ссылок в нижнем колонтитуле требуется настраиваемый маркер (фоновое изображение), а непрозрачность настраиваемого маркера должна быть 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%;
}
206
задан Stickers 21 January 2018 в 08:08
поделиться