Question

首先我有我的容器。

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

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

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

当我这样做时没有任何反应，当我通过“body”执行与我的网站背景类似的操作时，它确实有效。

感谢您的帮助。

编辑：我想的越多，我是否必须通过HTML执行此操作，有没有办法让html中插入的图像落后于其他所有内容并且无法与之交互？

编辑2：在前两个答案的帮助下，我就是这样：

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

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

Answer 1

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

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

Some docs.

Answer 2

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

我认为......你给予身高：100％;像上面的代码

Answer 3

.container { 宽度：780px; 背景：#FFF url（'picture.jpg'）无重复中心顶部; 保证金：0自动; 高度： '你-IMG-大小'; }

我猜它有效...

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

3 个答案: