使用 css 将图像添加到容器背景
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10656496/
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
Adding an image to a container background using css
提问by Programmer XYZ
First I have my container.
首先我有我的容器。
.container {
width: 780px;
background: #FFF;
margin: 0 auto;
}
Then I add this with the goal of having the image display across the container and spanning the 780px. The image will fade to pure black at the bottom and it will then mix with the background color.
然后我添加了这个，目的是让图像显示在整个容器中并跨越 780 像素。图像将在底部淡化为纯黑色，然后与背景颜色混合。
.container {
width: 780px;
background: #FFF url(picture.png) no-repeat center top;
margin: 0 auto;
}
Nothing happens when I do this, it does work when I do something similar to my site background through "body".
当我这样做时什么也没有发生，当我通过“body”做一些类似于我的网站背景的事情时它会起作用。
Thanks for the help.
谢谢您的帮助。
Edit: The more I think about it, do I have to do this through HTML, is there a way to make an image inserted in the html fall behind everything else and not be able to be interacted with?
编辑：我想得越多，我是否必须通过 HTML 来做到这一点，有没有办法让插入到 html 中的图像落后于其他所有内容并且无法与之交互？
Edit 2: With the help from the first 2 answer I am at this:
编辑 2：在前 2 个答案的帮助下，我在此：
.container {
width: 780px;
background: url(Portfolio Assets/PortfolioUnderNavbg.png) no-repeat center top #000;
margin: 0 auto;
height: 100%;
}
But it still won't work, I forgot to mention that the page does have a header, so I think I have to somehow make the background image move down to be under the header but still in the container. I read that background only accepts percentage adjustments in height but that was older documentation. Is there a way to make it start at say, 100px down from the top of the container?
但它仍然不起作用，我忘了提到该页面确实有一个标题，所以我想我必须以某种方式使背景图像向下移动到标题下但仍在容器中。我读到背景只接受高度的百分比调整，但那是较旧的文档。有没有办法让它从容器顶部向下 100px 开始？
回答by CamelBlues
Change to background:url('your-image.png') no-repeat center top #FFF
改成 background:url('your-image.png') no-repeat center top #FFF
What's happening is the #FFF color code is overriding the image url.
发生的事情是#FFF 颜色代码覆盖了图像 url。
回答by Karthi Shan
.container
{
width: 780px;
background: #FFF url(picture.jpg) no-repeat center top;
margin: 0 auto;
height:100%;
}
i think .... u give height:100%; like above code
我想……你给高度：100%；像上面的代码
回答by Pedro Henrique Moraes
.container { width: 780px; background: #FFF url('picture.jpg') no-repeat center top; margin: 0 auto; height:'your-img-size'; }
.container { 宽度：780px; 背景：#FFF url('picture.jpg') 无重复中心顶部；边距：0 自动；高度：'你的图片尺寸'; }
i guess it's working...
我想它的工作...
