html - CSS:ul-li菜单中的背景图像不透明度

Question

我有一个使用 ul/li 元素的菜单，它们有背景图片。

在整个 Internet 和 stackoverflow 中，都有关于如何破解背景图像不透明度的信息。例如:https://scotch.io/tutorials/how-to-change-a-css-background-images-opacity

但不适用于我使用菜单时的特定用例。显得特别棘手。从我尝试过的所有内容来看，上述网站中的解决方案之一似乎效果最好。

但是，图像仍然没有垂直对齐。我似乎无法将图像置于菜单中心...

    ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #333;
    }
    
    li {float: left;}
    
    li a {
        display: block;
        color: white;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
    }
    
    li a:hover {background-color: #4CAF50;}
    
    .my-container {
        position: relative;
        overflow: hidden;
    }
    .my-container a {
        position: relative;
        z-index: 2;
    } 
    .my-container img {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: auto;
        opacity: 0.2;
    }

    <ul>
    <li><div class="my-container"><a href="a">Aaaa</a> <img src="http://www.joaobidu.com.br/jb/content/uploads/2012/03/cancer3.png"></img></div></li>
    <li><div><a href="b">Bbbb</a></div></li>
    <li><div><a href="c">Cccc</a></div></li>
    <li><div><a href="d">Dddd</a></div></li>
    <li><div><a href="e">Eeee</a></div></li>
    </ul>

Answer 1

您好，请试试这个。

如果我们使用 top:-14px，它会影响像 chrome 和 safari 这样不接受负值的现代浏览器。所以我们可以使用下面的格式作为背景图片。

.my-container {
    background-image:url("http://www.joaobidu.com.br/jb/content/uploads/2012/03/cancer3.png");
    background-size:cover;
    background-repeat:no-repeat;
    background-position:center;
}