最新更新 sitemap 网站制作设计本站搜索
网页设计
国外网站 韩国网站 个人主页 手提袋设计 CSS 网页特效 平面设计 网站设计 Flash CMS技巧 服装网站 php教程 photoshop 画册 服务器选用 数据库 Office
虚拟主机 域名注册 云主机 网页设计 客服QQ:8208442

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

日期:11-05    来源:中国设计秀    作者:cnwebshow.com

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

经常会犯的错误:背景被裁减(查看示例)JCC中国设计秀

查看示例文件,在小于1280分辨率时,是没有问题的。但是如果你的显示器的分辨率大于1280像素,你会看到背景图片以外的部分。JCC中国设计秀

background-cuts-offJCC中国设计秀

实例1:一张图片(查看示例)JCC中国设计秀

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

imageJCC中国设计秀

css部分JCC中国设计秀

这部分很简单,为body元素设置背景图像(定位于center,top)JCC中国设计秀

imageJCC中国设计秀

以下是css代码:JCC中国设计秀

body { JCC中国设计秀
  padding: 0; JCC中国设计秀
  margin: 0; JCC中国设计秀
  background: #f8f7e5 url(wdw-bg.jpg) no-repeat center top; JCC中国设计秀
  width: 100%; JCC中国设计秀
  display: table; JCC中国设计秀
}
JCC中国设计秀

注意观察在body选择符内有两条额外的线条,这样是为了防止当浏览器窗口比内容宽度小时,背景图片的改变。(这在firefox会出现)JCC中国设计秀

imageJCC中国设计秀