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

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:在前两个答案的帮助下,我得到了以下结果:

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

但仍然无法正常工作,我忘了提到页面确实有一个标题头,所以我认为必须以某种方式使背景图像向下移动,以便在容器内仍然位于标题头下方。我读到背景只接受高度的百分比调整,但那是旧文档。是否有一种方法可以从容器顶部开始向下移动100像素?

1
将jsfiddle用来使所讨论的内容更易于查看。 - Sully
缺少的右花括号是一个笔误,还是你遇到问题的原因?你可以使用CSS来解决这个问题,这就是background的作用。 - Surreal Dreams
抱歉,我刚才没有复制它。我现在会立即修复它。 - Programmer XYZ
3个回答

4

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

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

一些文档。


我已经将它改成这样了,但仍然无法显示图像。这很奇怪,因为在页面的前20行中,我有完全相同的背景设置,而且它可以完美地工作。 - Programmer XYZ
我认为其他地方出了问题。正如另一位评论者所提到的,jsFiddle会很有帮助。此外,尝试将display:block;添加到.container中。 - CamelBlues

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

我认为您需要使用类似上面代码的height:100%;。

0

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

我猜它正在工作...


对不起,我不明白你的意思。这是我第一次尝试,但没有成功。 - Programmer XYZ
请注意...您需要设置容器类的“height”。 如果失败,请尝试更改背景:#FFF,因为有时颜色可能会“擦除”图像; - Pedro Henrique Moraes
我设置了高度为100%,因为容器应该随内容的长度进行缩放。我会尝试几种不同的颜色代码,看看会发生什么。 - Programmer XYZ

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接