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

2016-02-20 00:21 26 1 收藏

生活已是百般艰难,为何不努力一点。下面图老师就给大家分享使用一张或两张图片创建大背景网站，希望可以让热爱学习的朋友们体会到设计的小小的乐趣。

【 tulaoshi.com - Web开发】

自从我发表了大背景网站合集之后，我收到了很多邮件，询问怎样才能用 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

（本文来源于图老师网站，更多请访问https://www.tulaoshi.com/webkaifa/）实例 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，不要忘了点击 80个应用大背景图片的网站.

来源:https://www.tulaoshi.com/n/20160220/1631694.html

上一篇：移轴镜头烧不起好照片带你体验上帝之眼
下一篇： Win7系统开机启动项不能加载的处理方法

看过《使用一张或两张图片创建大背景网站》的人还看了以下文章更多>>

鼠标移动到一张图片时变为另一张图片

标签： Web开发

代码如下：用以下代码. script language="JavaScript"!-- c0off = new Image(80,30); c0off.src = "图片1位置"; c0on = new Image(80,30); c0on.src = "图片2位置"; function img_act(imgName) { imgOn = eval(i...

jQuery 点击图片跳转上一张或下一张功能的实现代码

标签： Web开发

代码如下： !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" html xmlns="http://www.w3.org/1999/xhtml" head meta http-equiv="Content-Type" content="text/html; charset=utf-8" / title无标题文档/title script type="text/javascript" src="jquery-1....

Photoshop使用一张图片表现多点时间

Photoshop使用一张图片表现多点时间有一种概念把时间称www.tulaoshi.com作第四维度，日复一日年复一年，在这漫漫长河里，我们也只能记录短暂的一瞬间。至于说将时间与摄影相容，近来比较火的就是延时摄影了。不过延时之后的成果要不就是一段短片，或者是一张GIF图片。不过这些都不是今天的重点，我这次为你介绍的是一种比较另类的...

jquery 图片上一张下一张链接效果（续篇）

标签： Web开发

前段时间写了篇图片上一张下一张链接效果，后来看到 jquery插件封装，手里痒痒的，拿这个例子做ex. 封装后的JS源码：代码如下： /* * imageupdown 1.0 * Copyright (c) 2009 * Date: 2010-04-20 * 图片移动上一张下一张特效 */ (function($){ $.fn.imageupdown = function(options){ var defaults = { upCursor:"pre.cur", ...

《黑手党2》发两张景色和两张夜景