使用 css 将图像添加到容器背景答案

【问题标题】：Adding an image to a container background using css使用 css 将图像添加到容器背景
【发布时间】：2012-05-18 16:37:20
【问题描述】：

首先我有我的容器。

 .container {
    width: 780px;
    background: #FFF;
    margin: 0 auto;
}

然后我添加它的目的是让图像显示在整个容器中并跨越 780 像素。图像将在底部淡化为纯黑色，然后与背景颜色混合。

.container {
        width: 780px;
        background: #FFF url(picture.png) no-repeat center top;
        margin: 0 auto;
}

当我这样做时没有任何反应，当我通过“body”做类似于我的网站背景的事情时它确实有效。

感谢您的帮助。

编辑：我想得越多，我是否必须通过HTML来做到这一点，有没有办法让插入到html中的图像落后于其他所有内容并且无法与之交互？

编辑 2：在前 2 个答案的帮助下，我在此：

.container {
    width: 780px;
    background: url(Portfolio Assets/PortfolioUnderNavbg.png) no-repeat center top #000;
    margin: 0 auto;
    height: 100%; 
}

但它仍然不起作用，我忘了提到页面确实有一个标题，所以我想我必须以某种方式让背景图像向下移动到标题下方但仍然在容器中。我读到背景只接受高度的百分比调整，但那是较旧的文档。有没有办法让它从容器顶部向下 100px 开始？

【问题讨论】：

jsfildde 让它更容易看到你在说什么。
缺少的右花括号是拼写错误，还是您遇到问题的原因？你可以用 CSS 做到这一点，这就是 background 的用途。
对不起，我只是没有复制它。我现在就修。

标签： css background containers

【解决方案1】：

更改为background:url('your-image.png') no-repeat center top #FFF

发生的事情是#FFF 颜色代码覆盖了图片网址。

Some docs.

【讨论】：

我把它改成了这个，它仍然不会显示图像，这太奇怪了，因为字面上有 20 行，我在整个页面的背景上都有完全相同的东西，而且效果很好。跨度>
我认为其他地方出了点问题。正如另一位评论者提到的，jsFiddle 会有所帮助。另外，尝试将display:block; 添加到 .container

【解决方案2】：

   .container 
    {
        width: 780px;
        background: #FFF url(picture.jpg) no-repeat center top;
        margin: 0 auto;
        height:100%;
   }

我认为....你给高度：100%；像上面的代码

【讨论】：

【解决方案3】：

.container { 宽度：780px；背景：#FFF url('picture.jpg') 不重复中心顶部；边距：0 自动；高度：'你的图片尺寸'; }

我猜它正在工作......

【讨论】：

对不起，我不明白你的意思。这是我第一次有的，没有工作。
注意...您需要设置容器类的“高度”。如果失败，请尝试更改背景：#FFF，因为有时颜色可能会“擦除”img；
我有 Height: 100% 因为容器应该随着内容的长度而缩放。我会尝试几种不同的颜色代码，看看会发生什么。