3

首先我有我的容器。

 .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 开始？

4

3 回答 3

4

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

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

一些文档。

于 2012-05-18T16:40:56.007 回答
2 
   .container 
    {
        width: 780px;
        background: #FFF url(picture.jpg) no-repeat center top;
        margin: 0 auto;
        height:100%;
   }

我想....你给身高：100％；像上面的代码

于 2012-05-18T16:44:47.707 回答
0

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

我想它正在工作......

于 2012-05-18T17:06:47.840 回答