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

首先，我有我的容器。使用css将图像添加到容器背景

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

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

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

什么也没有发生我这样做的时候，它的工作时，我通过“身体”做一些类似我的网站背景是什么。

感谢您的帮助。

编辑：我想到的越多，是否必须通过HTML来做到这一点，有没有办法让图像插入HTML背后的一切，不能与交互？

编辑2：从第一个2回答帮助我在此：

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

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

来源

2012-05-18 Programmer XYZ

jsfildde它，使其更容易看到你在说什么。 –

失踪的关闭大括号错误，还是您遇到问题的原因？你可以用CSS来做到这一点，这就是“背景”的作用。 –

对不起，我只是没有复制它。我现在会解决它。 –

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

发生了什么事是#FFF颜色代码重写图像的URL。

Some docs.

来源

2012-05-18 16:40:56 CamelBlues

我改变了这一点，它仍然不会显示图像，这是如此奇怪，因为从字面上20行，我有完全相同的事情为整个页面的背景，它的作品完美。 –

我觉得别的地方有些东西搞砸了。正如另一位评论者所说，jsFiddle会有所帮助。另外，尝试在.container – CamelBlues

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

我觉得....你给高度：100％;像以上代码

来源

2012-05-18 16:44:47

.container { width：780px; 背景：#FFF网址（'picture.jpg'）无重复中心顶部; margin：0 auto; 身高：'your-img-size'; }

我想这是工作......

来源

2012-05-18 17:06:47

上添加'display：block;'我很抱歉，我不明白你的意思。这是我第一次，没有工作。 –

注意......你需要设置你的容器类的“高度”。如果失败，请尝试更改背景：#FFF，导致某种颜色可能会“擦除”img; –

我有身高：100％，因为容器应该与内容的长度一起缩放。我会尝试一些不同的颜色代码，看看会发生什么。 –

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

回答

相关问题