Question

我有一个使用ul / li项目的菜单，他们有一个背景图片。

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

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

但是，图像不是垂直对齐的。我似乎无法将图像置于菜单中心......

＆＃13;

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

＆＃13;

    <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>

＆＃13;

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

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

1 个答案: