注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

优品设计

简约至上 点石成金(http://www.upindesign.com

 
 
 

日志

 
 

如何用CSS设计大背景图片网站   

2010-04-15 19:42:07|  分类: 默认分类 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

翻译原文《如何用CSS设计大背景图片网站》 翻译:不多不少

   让我们用一两张图片,构建自己的大背景图片网站!

   自从我发布了大量CSS大背景的网站,我收到很多电子邮件请教如何利用CSS设计一个大背景的网站 。所以,我想制作一个教程来分享我的技术并一步步教会大家如何设计一个大背景的网站,我认为这是一个很好的想法。在本教程,我将就如何设计一个大背景的网站提供多个CSS例子,并且使用单个或多个背景图像.

常见的错误:背景裁剪掉一部分 (查看 演示)

请看演示范列,它在1280像素或更小的显示器上是正常显示的。但是,如果你有一个高分辨率显示器,你将会看到背景两边留空了,比如我的19寸宽屏。

如何用CSS设计大背景图片网站  - gogo - 狗尾巴

例 #1: 单图片背景 (查看 演示)

用一个简单的方法来修复前面的背景留空问题:使用与图像边缘的相同的背景颜色(

BODY

background color)。在这里,我利用我的网站《webdesignerwall》作为一个例子。背景图像的边缘其实和整个页面的背景颜色是相同的。

如何用CSS设计大背景图片网站  - gogo - 狗尾巴

CSS 部分

这里的CSS是非常简单的。指定 

BODY

 的背景图片(no-repeat center top)就可以了。

如何用CSS设计大背景图片网站  - gogo - 狗尾巴

请看 CSS 代码:

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

注意这里有两个额外的属性设置。这是为了防止 当你的浏览器窗口小于图片宽度的时候 背景发生偏移(在Firefox中会发生这种现象) 。

如何用CSS设计大背景图片网站  - gogo - 狗尾巴

例 #2: 使用双背景图 (查看 演示)

在本例中,我利用这个网站来具体讲解。我在 

BODY 中

使用小图片重复平铺做为整体背景,大背景图片居中放在页面上部。

如何用CSS设计大背景图片网站  - gogo - 狗尾巴

这里的窍门是大背景图片的颜色要与背景GIF小图片颜色相似(这里用类似褐色)。

如何用CSS设计大背景图片网站  - gogo - 狗尾巴

例 #3: 使用天空图片背景 (查看 演示)

在这个例子中,我在BODY中用1px宽的纵向过度色图片让它横向重复。接下来我用一张天空图片放在#wrapper标签中,并使它居中。

如何用CSS设计大背景图片网站  - gogo - 狗尾巴

更新:在HTML标记中使用过渡色天空背景 (查看 演示)

下面这个例子,在HTML标记中使用过渡色的背景,用来显示天空背景,所以 

#wrapper

标记并不是必需的。这是一个更清洁的方式。

如何用CSS设计大背景图片网站  - gogo - 狗尾巴

打包下载演示文件,参考80个精选使用大图片背景的网站设计欣赏。 

本文原载:如何用CSS设计大背景图片网站

英文原文:http://www.webdesignerwall.com/tutorials/how-to-css-large-background/

  评论这张
 
阅读(2300)| 评论(1)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017