我的网站设计使用背景图片和纹理作为网站的一项功能。
请参阅此处的背景设计概念:http://www.flickr.com/photos/54233587@N03/6145240784/in/photostream
背景意图如下:
页面背景有平铺图案(或某些页面上会有纯色背景)。
背景的顶部覆盖有背景图像。背景图像是一个大图像(2000px宽),需要在窗口中居中。根据页面的不同,图像的高度将从底部裁剪(即,在一页上图像可能需要为400px,而在其他页面上可能需要为450px)。此背景图像还应用了CSS3框阴影,因此图像底部有一个轻微的阴影。此背景图像不能使用固定位置 - 也就是说,如果滚动页面,它应与页面一起移动。
所有其他页面内容位于居中div的背景之上,由屏幕截图中的黑框表示。
我试图通过将HTML5 html节点作为平铺背景来实现此目的。
html {
background: url(../img/pegboard.jpg) repeat center;
}
然后,对于覆盖的背景图像,我一直在使用div元素来插入图像。
<div id="bgimage"><img src="mybgimage.jpb"></div>
然后设置img的样式以尝试居中,在滚动时不固定,并调整div以从底部裁剪图像。一切都没有太大的成功。
感谢。
答案 0 :(得分:1)
我会做这样的事情。
HTML:
<div id="bgimage"></div>
<div id="content">
Actual content goes here.
</div>
CSS:
body {
background: url(../img/pegboard.jpg) repeat center;
}
#bgimage {
position: absolute;
top: 0;
left: 0;
right: 0;
background: url(../img/mybgimage.jpg) no-repeat center;
height: 400px;
box-shadow: 0 5px 5px -5px #000;
}
#content{
margin: 0 auto;
width: 960px;
height: 1000px;
background: #000;
filter: alpha(opacity=50);
opacity: 0.5;
}