首先,我有一个容器。
.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像素?
background
的作用。 - Surreal Dreams