Html CSS背景图像放置在:悬停
我有一个简单的HTML/CSS列表,内联显示。我正在为列表使用背景图像,为该列表的onhover命令使用另一个变体 悬停背景图像似乎未正确放置。它显示得有点太大,似乎有一些默认的填充 在CSS中,控制onhover命令背景图像的大小、填充和边距的最佳方法是什么 提前谢谢Html CSS背景图像放置在:悬停,html,css,Html,Css,我有一个简单的HTML/CSS列表,内联显示。我正在为列表使用背景图像,为该列表的onhover命令使用另一个变体 悬停背景图像似乎未正确放置。它显示得有点太大,似乎有一些默认的填充 在CSS中,控制onhover命令背景图像的大小、填充和边距的最佳方法是什么 提前谢谢 #navbar{ background-image: url('../images/navbar.png'); color: white; font: 20px arial,sans-serif; height: 45px; }
#navbar{
background-image: url('../images/navbar.png');
color: white;
font: 20px arial,sans-serif;
height: 45px;
}
#navbar a{
color: white;
text-decoration: none;
}
#navbar ul{
list-style: none;
margin:0;
padding:0;
}
#navbar li{
border-right: solid 1px white;
display: inline-block;
height: 45px;
line-height: 45px;
padding: 1px 10px 1px 10px;
}
#navbar li:hover{
background-image: url('../images/navbar-selected.png');
}
<div class="clear" id="navbar">
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="stock.php">Stock</a></li>
<li><a href="overview.php">Overview</a></li>
</ul>
</div>
你可以这样做:
#navbar li:hover{
background-image: url('../images/navbar-selected.png');
background-size: 50%;
background-position: center;
}
请将一个工作示例上传到jsfiddle.net或类似版本,如果不看到问题就有点难以帮助:我们能看到这段代码在什么地方工作吗?可能有很多事情会导致这种行为。你知道navbar.png是navbar的背景吗?这不是navbar li的背景吗?谢谢你的回答,这让我添加了背景重复:x'