有没有办法使菜单项悬停透明到背景图像?如您所见,背景中的图像是使用background-size cover选项设置的,并且在不同的屏幕大小下可以缩放。
HTML:
HTML:
<div class="header">
<p></p>
<div class="menu-container">
<ul>
<li><a href="#" title="">Menu 1</a></li>
<li><a href="#" title="">Menu 2</a></li>
<li><a href="#" title="">Menu 3</a></li>
</ul>
</div>
<p></p>
</div>
CSS:
div.header{
background: url('http://de.fwsx.co/mbergs/images/home-header.jpg') no-repeat;
background-size: cover;
height: 400px;
}
p:first-child,
p:last-child {
height: 50px;
}
div.menu-container {
background: #fff;
}
div.menu-container ul li {
display: inline-block;
list-style: none;
}
div.menu-container ul li a {
display: block;
height: 50px;
line-height: 50px;
padding: 0 20px;
}
div.menu-container ul li a:hover {
background: rgba(64,161,47, 0.6);
}
jsFiddle: https://jsfiddle.net/qwLp9f9y/1/
编辑:全宽菜单容器必须保持纯白色。
谢谢。