我正在创建一个网页,我有一个图像,我想放在中心,然后在该图像的顶部,我想有输入框和标签和提交按钮.
我正在尝试使用CSS
img.center
{
z-index:-1;
}
但这不起作用.当我将代码更改为
img.center
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
如果使图像落后,但随后我使用left:0px和top:0px...它将图像放在0,0 ..但我希望图像保持在中心.
保持图像在中心我有<div align="center">标签.
无论如何,我可以将图像保持在中心并使其落后吗？
我的.html页面看起来像这样:(我确实为我的div标签设置了一个背景图片,但那里没有出现图像)
<html>
<head>
<title>Question of the Week</title>
<style type="text/css">
body
{
background-image:url('images/background.jpg');
background-repeat:repeat-x;
}
.container
{
background-image:url('images/center.jpg');
background-repeat:no-repeat;
}
td.cntr {padding-top:50px;}
</style>
</head>
<body topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0" marginwidth="0" marginheight="0">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><div align="left"><img src="images/logo.jpg"></div></td>
<td></td>
<td><div align="right"><img src="images/right_logo.jpg"></div></td></tr>
</table>
</tr>
<tr>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="cntr">
<div id="container">
<input name="box" type="textbox" />
<input name="box" type="textbox" />
<input name="submit" type="submit" />
</div>
</td>
</tr>
</table>
</tr>
</table>
</body>
</html>
Mik*_*ike 15
好吧,把你的图像放在你的网站/容器的后台,然后把你想要的东西放在上面.所以说你有:
<div id="container">
<input name="box" type="textbox" />
<input name="box" type="textbox" />
<input name="submit" type="submit" />
</div>
这是在您的代码中,你看起来像CSS:
#container {
background-image:url(yourimage.jpg);
background-position:center;
width:700px;
height:400px;
}
为了使这个工作,你必须将高度和宽度指定为某些值(即没有%)我可以更具体地帮助你,如果你需要它,但我需要更多的信息.
Emi*_*ily 12
使其成为居中的背景图像.
.wrapper {background:transparent url(yourimage.jpg) no-repeat center center;}
<div class="wrapper">
...input boxes and labels and submit button here
</div>
and*_*vig 11
您可以使用position:absolute或定位图像和文本position:relative.然后z-index属性将起作用.例如
#sometext {
position:absolute;
z-index:1;
}
image.center {
position:absolute;
z-index:0;
}
使用您喜欢的任何方法来居中.
另一个选项/ hack是将图像作为背景,在整个页面上或仅在文本框内.