My menu is made up of ul/li items with background images, but I'm having trouble adjusting the opacity and alignment of the images. While there are resources online for changing background image opacity, such as this article: https://scotch.io/tutorials/how-to-change-a-css-background-images-opacity, none seem to address my specific menu use case.
After trying various solutions, the one provided in the aforementioned website works best for me. However, I am still struggling to vertically align the images within 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>