CSS：ul-li菜單中的背景圖像不透明

Question

我有一個使用ul/li項目的菜單，它們有一個背景圖像。

遍及互聯網，並在計算器中，有關於如何破解背景圖像不透明的信息。例如：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; 
}