gpt4 book ai didi

html - 每个按钮都有相同的图片

转载 作者:行者123 更新时间:2023-11-28 11:36:49 27 4
gpt4 key购买 nike

我现在有点问题,它与按钮有关。出于某种原因,他们这样做: 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;
}

最佳答案

在 CSS 中使用背景图片代替背景。还包括背景重复:不重复。

关于html - 每个按钮都有相同的图片,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20877776/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com