Question

我现在有点问题，它与按钮有关。出于某种原因，他们这样做： enter image description here 通常情况下，它应显示：新闻，注册等。

并且它不是我的浏览器，我尝试过使用Firefox，IE和Chrome，都给出了同样的效果。

下面是HTML代码：

<!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：

@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; 
}

Answer 1

在CSS中使用background-image而不是background。还包括背景重复：不重复。

每个按钮都有相同的图片

1 个答案: