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

Question

首先我有我的容器。

 .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%; 
}

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

Answer 1

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

发生的事情是#FFF 颜色代码覆盖了图像 url。

Some docs.