设置背景图像的不透明度，而不影响子元素 [英] Set opacity of background image without affecting child elements

问题描述

是否可以设置背景图片的不透明度而不影响子元素的不透明度？

Is it possible to set the opacity of a background image without affecting the opacity of child elements?

页脚中的所有链接都需要自定义项目符号（背景图片），自定义项目符号的透明度应为50％。

All links in the footer need a custom bullet (background image) and the opacity of the custom bullet should be 50%.

<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

css

#footer ul li {
    background: url(/images/arrow.png) no-repeat 0 50%;
}  

我尝试了

我试图将列表项的不透明度设置为50％，但是链接文本的不透明度也是50％ - 似乎没有办法重置子元素的不透明度：

What I've Tried

I tried setting the opacity of the list items to 50%, but then the opacity of the link text is also 50% - and there doesn't seem to be a way to reset the opacity of child elements:

#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，但是没有任何影响背景图片：

I also tried using rgba, but that doesn't have any affect on the background image:

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

推荐答案

编辑器，调低不透明度，将其另存为.png，然后使用它。

Take your image into an image editor, turn down the opacity, save it as a .png and use that instead.

这篇关于设置背景图像的不透明度，而不影响子元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！