我的css页脚文件如下
body {
background:url(wood1.jpg) repeat;
}
#footer {
position:fixed;
bottom:0px;
margin:0px;
right:0px;
left:0px;
padding:0px;
height:40px;
width:100%;
font-family:Arial;
text-shadow:1px 1px 1px black;
border-top:1px solid rgba(0,0,0,0.5);
background:rgba(0,0,0,0.25);
box-shadow:inset 0 3px rgba(255,255,255,0.3),inset 0 10px rgba(255,255,255,0.2),
inset 0 10px 20px rgba(255,255,255,0.25),inset 0 -15px 20px rgba(0,0,0,0.3);
}
#footer_menu.homeButton {
border:none;
background:none;
}
#footer-menu.homeButton a {
background-image: url("button.png");
background-repeat: no-repeat;
background-position:center;
height:70px;
padding:5px 8px 50px 15px;
border:none;
width:70px;
}
#footer_menu.homeButton:hover a {
background:none;
}
#footer_menu.homeButton a:hover {
background:url(homebutton2.jpg);
background-repeat: no-repeat;
background-position:center;
}
我的页脚 html 文件是
<!DOCTYPE html>
<html>
<head>
<title>This is index file for Footer</title>
<link rel="stylesheet" type="text/css" href="footer1.css"/>
</head>
<body>
<div id="footer">
<ul id="footer-menu">
<li class="homeButton"><a href="#"></a></li>
</ul>
</div>
</body>
</html>
当我在浏览器中运行时，它不会显示主页按钮。并且页脚中出现一个黑点。请给出解决此问题的方法。 什么时候，我会给背景位置左上角，它不会移动图像。
最佳答案
您的 CSS 选择器是:
#footer_menu.homeButton
这是一个 ID 为 footer_menu 且类为 homeButton 的元素。 如果它是一个子元素，那么你应该添加一个空格:
#footer_menu .homeButton
这是一个 ID 为#footer_menu 的元素和一个类为 homeButton 的 child
关于html - css 页脚图像不会显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23933202/