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

Question

I have a menu using ul/li items, and they have a background image.

All over the Internet, and in stackoverflow, there is information on how to hack background image opacity. For example: https://scotch.io/tutorials/how-to-change-a-css-background-images-opacity

But not for my particular use case when using menus. It seems particularly tricky. From everything I have tried, one of the solutions in the aforementioned website seems to work the best.

But still, the image is not vertically aligned. I cannot seem to be able to center the image in the menu...

  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

Hi,Please try this one.

If we will use top:-14px,It will affecting the modern browser like chrome and safari which is not accepting negative values.So we can use below format for background images.

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