Html 每个按钮都有相同的图片
我现在有点问题,这和按钮有关。 出于某种原因,他们会这样做: 正常情况下,应显示:新闻、注册等 它不是我的浏览器,我试过Firefox、IE和chrome,它们都给出了相同的结果 以下是HTML代码:Html 每个按钮都有相同的图片,html,css,Html,Css,我现在有点问题,这和按钮有关。 出于某种原因,他们会这样做: 正常情况下,应显示:新闻、注册等 它不是我的浏览器,我试过Firefox、IE和chrome,它们都给出了相同的结果 以下是HTML代码: <!doctype html> <html> <head> <link rel="shortcut icon" type="image/x-icon" href="public/img/favicon.ico"> <title&
<!doctype html>
<html>
<head>
<link rel="shortcut icon" type="image/x-icon" href="public/img/favicon.ico">
<title>Toontown Fantasy</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js"></script>
<link href="public/css/main.css" rel="stylesheet" type="text/css">
<meta charset="utf-8">
</head>
<body>
<div align="center" class="top">
<br>
<div class="logo"></div>
<br>
<div class="menu">
<a href="http://****************.com">
<div class="home"></div>
</a>
<a href="http://****************.com/news">
<div class="news"></div>
</a>
<a href="http://****************.com/play">
<div class="play"></div>
</a>
<a href="http://****************.com/register">
<div class="reg"></div>
</a>
<a href="http:/****************.com/help">
<div class="help"></div>
</a>
</div>
<br>
</div>
<div class="main" align="center"><!-- main content !-->
<h1>Currently Under construction...</h1>
<h3>Come back later.</h3>
</div>
<br><br>
</body>
</html>
在CSS中使用背景图像而不是背景。还包括背景重复:无重复。您使用的是相同的url/public/img/buttons.png,这就是它显示相同图像的原因。buttons.png它们不是一个单独的按钮。这并没有什么作用。另外,它是用于按钮,而不是BG。请将px放在位置值前面,然后检查。
@font-face { /* nice tt like font. will put probrably a mickey like font at some point */
font-family: toontown;
src: url('/public/fonts/toontown.ttf');
}
body{
font-family: toontown;
background:#f6c719 url('/public/img/background.png')
top center no-repeat fixed;
background-size:100% 100%;
height:100%;
margin:0;
}
.logo { /* logo banner */
border-top-left-radius: 10px;
border-top-right-radius: 10px;
background-image:url(/public/img/logo.png);
padding-top:10px;
width: 607px;
height: 199px;
}
.main {
padding: 10px;
margin:0 auto 0 auto;
border:3px solid #2E64FE;
border-bottom-left-radius: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
width: 860px;
height: inherit;
background-color:#FFFF00;
overflow: auto;
}
.home {
display: block;
width: 143px;
height: 65px;
background: url('/public/img/buttons.png');
background-position: 283 135; /* y,x */
display: inline-block
}
.home:hover {
background-position: 140 135;
transition: 0.0s linear all;
-webkit-transform: scale(1.1);
transform: scale(1.1);
display: inline-block
}
.news {
display: block;
width: 143px;
height: 65px;
background: url('/public/img/buttons.png');
background-position: 0 335;
display: inline-block
}
.news:hover {
background-position: -140 335;
transition: 0.0s linear all;
-webkit-transform: scale(1.1);
transform: scale(1.1);
display: inline-block
}
.play {
display: block;
width: 143px;
height: 65px;
background: url('/public/img/buttons.png');
background-position: 0 -132;
display: inline-block
}
.play:hover {
background-position: -141 -132;
transition: 0.0s linear all;
-webkit-transform: scale(1.2);
transform: scale(1.3);
display: inline-block
}
.reg {
display: block;
width: 143px;
height: 65px;
background: url('/public/img/buttons.png');
background-position: 283 top;
display: inline-block
}
.reg:hover {
background-position: 140 0;
transition: 0.0s linear all;
-webkit-transform: scale(1.1);
transform: scale(1.1);
display: inline-block
}
.help {
display: block;
width: 143px;
height: 65px;
background: url('/public/img/buttons.png');
background-position: 0 top;
display: inline-block
}
.help:hover {
background-position: -140 0;
transition: 0.0s linear all;
-webkit-transform: scale(1.1);
transform: scale(1.1);
display: inline-block
}
.menu {
width: 50%
/*margin: 0 auto 0 auto;*/
white-space: nowrap
}
.top {
overflow:hidden; /* lil hack to avoid pic from scrolling */
}
::-webkit-scrollbar {
display: none;
}