中国设计秀
中国设计秀
  • 当前位置:首页 > 网络设计学院 > CSS/html5教程

CSS网页设计技巧:设计制作大背景网页

作者:vivi2009 源自:中国设计秀 时间:2011-11-05 16:39:17 点击: 关键字:CSS,CSS教程

自从我发布了大背景网页设计合集之后,我收到了很多电子邮件询问如何用css实现大背景的网页设计。因此我决定和大家分享大背景网站的设计技巧。在此教程中,我会用一些实例来说明如何用一张或者两张图片实现大背景网站的设计。ov2网页设计作品_优秀网站设计_网页制作教程_设计素材_中国设计秀

经常会犯的错误:背景被裁减(查看示例)ov2网页设计作品_优秀网站设计_网页制作教程_设计素材_中国设计秀

查看示例文件,在小于1280分辨率时,是没有问题的。但是如果你的显示器的分辨率大于1280像素,你会看到背景图片以外的部分。ov2网页设计作品_优秀网站设计_网页制作教程_设计素材_中国设计秀

background-cuts-offov2网页设计作品_优秀网站设计_网页制作教程_设计素材_中国设计秀

实例1:一张图片(查看示例)ov2网页设计作品_优秀网站设计_网页制作教程_设计素材_中国设计秀

简单的解决问题的方法:将图片边缘的颜色设置成和网页背景色相同的颜色。这里我用Web Designer Wall作例子,看下面的图片,注意图片的边缘是纯色的。ov2网页设计作品_优秀网站设计_网页制作教程_设计素材_中国设计秀

imageov2网页设计作品_优秀网站设计_网页制作教程_设计素材_中国设计秀

css部分ov2网页设计作品_优秀网站设计_网页制作教程_设计素材_中国设计秀

这部分很简单,为body元素设置背景图像(定位于center,top)ov2网页设计作品_优秀网站设计_网页制作教程_设计素材_中国设计秀

imageov2网页设计作品_优秀网站设计_网页制作教程_设计素材_中国设计秀

以下是css代码:ov2网页设计作品_优秀网站设计_网页制作教程_设计素材_中国设计秀

body { ov2网页设计作品_优秀网站设计_网页制作教程_设计素材_中国设计秀
  padding: 0; ov2网页设计作品_优秀网站设计_网页制作教程_设计素材_中国设计秀
  margin: 0; ov2网页设计作品_优秀网站设计_网页制作教程_设计素材_中国设计秀
  background: #f8f7e5 url(wdw-bg.jpg) no-repeat center top; ov2网页设计作品_优秀网站设计_网页制作教程_设计素材_中国设计秀
  width: 100%; ov2网页设计作品_优秀网站设计_网页制作教程_设计素材_中国设计秀
  display: table; ov2网页设计作品_优秀网站设计_网页制作教程_设计素材_中国设计秀
}
ov2网页设计作品_优秀网站设计_网页制作教程_设计素材_中国设计秀

注意观察在body选择符内有两条额外的线条,这样是为了防止当浏览器窗口比内容宽度小时,背景图片的改变。(这在firefox会出现)ov2网页设计作品_优秀网站设计_网页制作教程_设计素材_中国设计秀

imageov2网页设计作品_优秀网站设计_网页制作教程_设计素材_中国设计秀

 1/2    1 2 下一页 尾页
上一篇文章: CssGaga教程:css合并与CSS优化教程           下一篇文章: CssGaga教程:css压缩技巧
本文引用地址:http://www.cnwebshow.com/
本文关键字:CSS,CSS教程