CSS：ul-liメニューの背景画像の不透明度

Question

ul/li項目を使用したメニューがあり、背景画像があります。

インターネット上では、stackoverflowには、背景画像の不透明度をハックする方法に関する情報があります。例：https://scotch.io/tutorials/how-to-change-a-css-background-images-opacity

ただし、メニューを使用している私の特定の使用例ではありません。特に難しいようです。私が試したすべてのものから、前述のウェブサイトのソリューションの1つが最も効果的なようです。

しかし、画像は垂直に配置されていません。私はこんにちは、これを試してみてください

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