源码网,源码论坛,源码之家,商业源码,游戏源码下载,discuz插件,棋牌源码下载,精品源码论坛

 找回密码
 立即注册
楼主: ttx9n

[CSS] 使用一张或两张图片创建大背景网站

[复制链接]

7万

主题

861

回帖

32万

积分

论坛元老

Rank: 8Rank: 8

积分
329525
发表于 2009-12-7 02:12:30 | 显示全部楼层 |阅读模式
在这篇教程中,我会提供多种 CSS 事例来讲解,如何使用一张或者两张图片来创建大背景网站。

自从我发表了 大背景网站 合集之后,我收到了很多邮件,询问怎样才能用 CSS 来定义网站中的大背景。于是我就想,分享下我在制作大背景网站中所应用到的技术或许是个不错的主意。在这篇教程中,我会提供多种 CSS 事例来讲解,如何使用一张或者两张图片来创建大背景网站。

常见的错误: 背景被裁减 (查看 演示)

看一下 演示 文件效果, 在 1280px 分辨率时显示的是正常的。但是在高于这个分辨率的显示器中,背景的两则看起来就像是被切短的了。

background cuts off

实例 1: 单张图片 (请看 范例)

迅速解决前面提到这一问题: 将图片边缘的颜色设置成跟 BODY 背景色相同的颜色。这里我以 Web Designer Wall 作为范例。请检查,下 图 中的边缘用的是纯色?

WDW background image

CSS 部分

CSS 部分非常简单。指定 BODY 标签的背景图像 (position 定位为 center, top) 。

CSS overview

这里是 CSS 代码:

body {
  padding: 0;
  margin: 0;
  background: #f8f7e5 url(wdw-bg.jpg) no-repeat center top;

  width: 100%;
  display: table;
}

注意,在 BODY 选择器中有两行额外的代码。这是为了防止在浏览器的内容小于宽度时背景图片发生偏移 (这在 Firefox 中会出现).

Firefox bug

实例 2: 两张图片 (请看 示范)

在这个实例中,我准备用工作中一个样式模板, Design Jobs on the Wall。我给 BODY 标签应用了重复的软木板重复图案,#wrapper 标签应用了居中的背景。

cork board

这里的小技巧是导出了一张近似软木板图案、暗棕色的 gif 图片。

cork board overlay background

实例 3: 天空背景 (see demo)

在这个实例中,我给标签 BODY 设置了重复 1px 水平方向的渐变。然后给标签 #wrapper 附上云层背景。

sky background

更新: 天空背景使用 HTML 选择器 (请看 范例)

感谢读者们的评论。下面的天空背景实例是使用 HTML 选择器来显示渐变背景,所以 #wrapper DIV 标签也就不需要了。这是一个更清洁的方式。

sky background 2

立即下载 范例 zip

回复

使用道具 举报

3

主题

2万

回帖

294

积分

中级会员

Rank: 3Rank: 3

积分
294
发表于 2023-4-30 02:33:32 | 显示全部楼层
66666666666666666666
回复 支持 反对

使用道具 举报

0

主题

2万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2023-7-24 04:44:55 | 显示全部楼层
很不错的源码论坛
回复 支持 反对

使用道具 举报

6

主题

2万

回帖

425

积分

中级会员

Rank: 3Rank: 3

积分
425
发表于 2023-9-8 18:29:39 | 显示全部楼层
我要金豆金豆金豆
回复 支持 反对

使用道具 举报

0

主题

2万

回帖

194

积分

注册会员

Rank: 2

积分
194
发表于 2023-11-7 17:13:12 | 显示全部楼层
激动人心,无法言表!
回复 支持 反对

使用道具 举报

0

主题

1万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2024-1-25 00:47:37 | 显示全部楼层
这个源码还可以
回复 支持 反对

使用道具 举报

0

主题

2万

回帖

194

积分

注册会员

Rank: 2

积分
194
发表于 2024-3-2 06:15:10 | 显示全部楼层
建军节建军节建军节建军节
回复 支持 反对

使用道具 举报

1

主题

2万

回帖

182

积分

注册会员

Rank: 2

积分
182
发表于 2024-3-16 21:53:26 | 显示全部楼层
iiguuubhuiuihu
回复 支持 反对

使用道具 举报

4

主题

2万

回帖

316

积分

中级会员

Rank: 3Rank: 3

积分
316
发表于 2024-6-24 16:22:04 | 显示全部楼层
还不错啊
回复 支持 反对

使用道具 举报

4

主题

2万

回帖

107

积分

注册会员

Rank: 2

积分
107
发表于 2024-6-30 12:59:40 | 显示全部楼层
儿童服务绯闻绯闻绯闻
回复 支持 反对

使用道具 举报

高级模式
B Color Image Link Quote Code Smilies

本版积分规则

手机版|小黑屋|网站地图|源码论坛 ( 海外版 )

GMT+8, 2024-11-24 23:14 , Processed in 0.073704 second(s), 25 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表