Html 使用 css 将图像置于文本后面并使其居中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1093955/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Make the image go behind the text and keep it in center using css
提问by Zeeshan Rang
I am creating a webpage, where i have an image, that i want to place in the center and then on the top of that image i want to have input boxes and labels and submit button.
我正在创建一个网页，其中有一个图像，我想将其放置在中心，然后在该图像的顶部，我想有输入框和标签以及提交按钮。
I am trying to use the css
我正在尝试使用 css
img.center
{
z-index:-1;
}
but this does not works. and when i change the code to
但这不起作用。当我将代码更改为
img.center
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
if make the image go behind, but then as i used left:0pxand top:0px... it puts the image at loaction 0,0 .. but i want the image to stay in the center.
如果使图像背后去，但后来为我所用left:0px，并top:0px...它把图像在loaction 0,0 ..但我想要的形象留在了中心。
to keep the image in the center i have <div align="center">tag.
为了将图像保持在中心，我有<div align="center">标签。
is there anyway, i can keep the image in the center and make it go behind too???
无论如何，我可以将图像保持在中心并让它也落后？？？
My .html page looks like this:(i did tried to have a background image for my div tag, but no image is appearing over there)
我的 .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>
采纳答案by Mike
Well, put your image in the back ground of your website/container and put whatever you want on top of that. so say you have:
好吧，把你的图片放在你的网站/容器的背景中，然后把你想要的任何东西放在上面。所以说你有：
<div id="container">
<input name="box" type="textbox" />
<input name="box" type="textbox" />
<input name="submit" type="submit" />
</div>
This is be in your code and you CSS would look like:
这是在您的代码中，您的 CSS 将如下所示：
#container {
background-image:url(yourimage.jpg);
background-position:center;
width:700px;
height:400px;
}
For this to work tho, you must have height and width specified to certain values (i.e. no %'s) I could help you more specifically if you needed it, but I'd need more info.
为此，您必须将高度和宽度指定为某些值（即没有 %），如果您需要，我可以更具体地帮助您，但我需要更多信息。
回答by Mike
You can position both the image and the text with position:absoluteor position:relative. Then the z-index propertywill work. E.g.
您可以使用position:absolute或定位图像和文本position:relative。然后z-index 属性将起作用。例如
#sometext {
position:absolute;
z-index:1;
}
image.center {
position:absolute;
z-index:0;
}
Use whatever method you like to center it.
使用您喜欢的任何方法将其居中。
Another option/hack is to make the image the background, either on the whole page or just within the text box.
另一种选择/hack 是将图像作为背景，无论是在整个页面上还是仅在文本框中。
回答by Emily
Make it a background image that is centered.
使其成为居中的背景图像。
.wrapper {background:transparent url(yourimage.jpg) no-repeat center center;}
<div class="wrapper">
...input boxes and labels and submit button here
</div>
回答by Scott Baker
Try this code:
试试这个代码：
body {z-index:0}
img.center {z-index:-1; margin-left:auto; margin-right:auto}
Setting the left & right margins to auto should center your image.
将左右边距设置为自动应该使您的图像居中。
回答by Rahul
Start at 0 and go up from there, rather than using -1. For instance, set the div containing your inputs and labels to a z-index of 100, and give the image you want to place behind it a z-index of 50.
从 0 开始并从那里上升，而不是使用 -1。例如，将包含输入和标签的 div 设置为 z-index 为 100，并为要放置在其后面的图像设置 z-index 为 50。
Alternatively just set the image as the background-image of the div containing the inputs and labels. Since the image is probably illustrative and therefore presentational, it doesn't really need to be an actual img element.
或者，只需将图像设置为包含输入和标签的 div 的背景图像。由于图像可能是说明性的，因此是展示性的，因此它实际上并不需要是实际的 img 元素。
回答by George Gurrola
There are two ways to handle this.
有两种方法可以处理这个问题。
- Background Image
- Using z-index property of CSS
- 背景图片
- 使用 CSS 的 z-index 属性
The background image is probably easier. You need a fixed width somewhere.
背景图像可能更容易。您需要在某处固定宽度。
.background-image {
width: 400px;
background: url(background.png) 50% 50%;
}
<form><div class="background-image"></div></form>
回答by 01nick
I style my css in its own file. So I'm not sure how you need to type it in as your are styling inside your html file. But you can use the Img{ position: relative Top: 150px; Left: 40px; } This would move my image up 150px and towards the right 40px. This method makes it so you can move anything you want on your page any where on your page If this is confusing just look on YouTube about position: relative
我在自己的文件中设置我的 css 样式。所以我不确定你需要如何输入它，因为你在你的 html 文件中设置样式。但是你可以使用 Img{ position: relative Top: 150px; 左：40px；这会将我的图像向上移动 150 像素并向右移动 40 像素。这种方法使您可以在页面上的任何位置移动您想要的任何内容如果这令人困惑，请查看 YouTube 上的位置：相对
I also use the same method to move my h1 tag on top of my image.
我也使用相同的方法将我的 h1 标签移动到我的图像之上。
In my html5 file my image is first and below that I have my h1 tag. Idk if this effects witch will be displayed on top of the other one.
在我的 html5 文件中，我的图像首先是我的 h1 标签。不知道这个效果女巫是否会显示在另一个的顶部。
Hope this helps.
希望这可以帮助。
