摘要：
　　今天下午又有人在群里问天猫二级页面全屏固定背景的代码，然后艺灵果断决定写一篇初级教程......

下午在公司加班，上了下qq，然后看到有看官在群内问天猫二级页面全屏固定背景的问题，不得不说：这是一个很老的问题了，含金量并不高，只要看官能理解css中的background即可解决该问题。为了照顾更多的小白，在此特写一篇详细的初级教程。

一、初识background-image

background-image在CSS3手册中的释义是：设置或检索对象的背景图像。取值有以下几个：
语法：
background-image：<bg-image> [ , <bg-image> ]*
<bg-image> = none | <url> | <linear-gradient> | <radial-gradient> | <repeating-linear-gradient> | <repeating-radial-gradient>
默认值：none
取值：
none： 无背景图。
<url>： 使用绝对或相对地址指定背景图像。
<linear-gradient>： 使用线性渐变创建背景图像。（CSS3）
<radial-gradient>： 使用径向(放射性)渐变创建背景图像。（CSS3）
<repeating-linear-gradient>： 使用重复的线性渐变创建背景图像。（CSS3）
<repeating-radial-gradient>： 使用重复的径向(放射性)渐变创建背景图像。（CSS3）

虽然background-image的取值有很多，但平时我们用的比较多的是第二个：url()

从上面的释义中我们可以看出：这个url()中可以使用相对定位或绝对定位的图片。接下来我们开始做实例。

二、url()应用

我们随便找一张网络图片或本地图片的地址，此处以淘宝中的图片地址为例。示例图片地址：https://img.alicdn.com/imgextra/i2/759415648/TB2p6gmbXXXXXbYXpXXXXXXXXXX_!!759415648.png，图片的尺寸为：80*80，如图：虽然我们现在看不出来这个url()到底有什么作用，但下面的实例会让你对url()有进一步的了解。

为了更直观的显示url()的作用，我们直接将其作用到body身上。接下来我们写一行css代码即可看到最终的效果。

demo1

<style type="text/css">
body{
background-image:url(https://img.alicdn.com/imgextra/i2/759415648/TB2p6gmbXXXXXbYXpXXXXXXXXXX_!!759415648.png);
}
</style>

效果图：

正如图所示：上面的这行代码已经让整个网页由空白变成满屏的“艺灵设计”，是不是感觉很神奇？如果看官刚有看示例图片地址的话，应该能记得示例图片的尺寸为：80*80，只能显示“艺灵设计”4个字，但现在展现在眼前的是上百个“艺灵设计”字样，这又是怎么做到的呢？

如果看官有上面的疑问，那么恭喜看官：请继续保持这种状态。

三、background-repeat平铺

上面的网页中之所以会显示满屏的图案是因为background-repeat在作祟！虽然上面的代码中我们没有写这个background-repeat，但它确实是生效了。因为这是默认属性在搞鬼！为了让看官们更加清楚这一点，接下来我们还是看手册中的说明吧。

语法：
background-repeat：<repeat-style> [ , <repeat-style> ]*
<repeat-style> = repeat-x | repeat-y | [repeat | space | round | no-repeat]{1,2}
默认值：repeat

取值：
repeat-x： 背景图像在横向上平铺
repeat-y： 背景图像在纵向上平铺
repeat： 背景图像在横向和纵向平铺
no-repeat： 背景图像不平铺
round： 背景图像自动缩放直到适应且填充满整个容器。（CSS3）
space： 背景图像以相同的间距平铺且填充满整个容器或某个方向。（CSS3）

这下看到了吧，默认值是repeat，也就是完全平铺的意思。明白了这一点后我们可以控制上面的代码，让页面中只显示一张图片。

demo2

<style type="text/css">
body{
background-image:url(https://img.alicdn.com/imgextra/i2/759415648/TB2p6gmbXXXXXbYXpXXXXXXXXXX_!!759415648.png);
background-repeat:no-repeat;
}
</style>

上面黄色高度的代码为我们新增的代码，此时页面中就只显示一张图片了，如图：

四、1px背景平铺技术

想必此时看官们已经知道该如何控制图片的平铺方向了吧。如果不能够理解，下面这个经典实例将刷新你对background-repeat的看法！

通常情况下，美工出的设计图中会有一些大面积色块的背景图层，这些图层从某种角度上来说，多数都是可以平铺实现的。对于看官们来说：他们并不能理解在网页中要采取平铺的方法而不是一整张背景图。(注：背景图完全无规律的除外。)采取平铺最大的好处之一是：节省图片大小。因此，艺灵建议还不知道此技术的看官们在以后可以采用此方法，绝对可以大幅度提升网页的打开速度！

五、background-attachment背景固定

我们先修改下前面的demo2的代码，给body添加一个高度，主要是为了让浏览器出现滚动条。

demo3

<style type="text/css">
body{
background-image:url(https://img.alicdn.com/imgextra/i2/759415648/TB2p6gmbXXXXXbYXpXXXXXXXXXX_!!759415648.png);
background-repeat:no-repeat;
height:2000px;
}
</style>

此时我们拉动页面滚动条时可以看到页面中的图片会跟随着页面一起滚动，如图：

当我们再添加一个background-attachment:fixed时，神奇的事情发生了：图片固定在原处，无论滚动条怎么拉，图片位置始终不变。如图：

也许看官还不明白这是为什么，接下来我们看手册中的释义。
语法：
background-attachment：<attachment> [ , <attachment> ]*
<attachment> = fixed | local | scroll
默认值：scroll
取值：
fixed： 背景图像相对于窗体固定。
scroll： 背景图像相对于元素固定，也就是说当元素内容滚动时背景图像不会跟着滚动，因为背景图像总是要跟着元素本身。但会随元素的祖先元素或窗体一起滚动。
local： 背景图像相对于元素内容固定，也就是说当元素随元素滚动时背景图像也会跟着滚动，因为背景图像总是要跟着内容。（CSS3）

上面已经实现了背景固定，此时我们更换张大图片，例如：1920*1080的图片，然后替换掉上面的图片即可。

为了更好的将代码应用到淘宝或天猫或京东等平台中的每一个页面中，我们需要将代码单独提取出来，不能设置给body。

六、全屏背景固定代码

demo4

<!--提示：复制以下html到自己店铺，在首页最上面新建一【自定义内容区】，在源码状态下保存此html，发布即可。下面最好不要添加系统模块，否则会被遮挡！此代码支持：天猫B店首页、天猫B店二级页面、淘宝C店首页。此注释在保存后会自动清除-->
<div style="height:0">
　<div class="footer-more-trigger most-footer cloud-footer" style="position:absolute;left:50%;top:auto;width:0;height:0;border:0;padding:0;background-color:transparent;display:block;overflow:visible;z-index:1;">
　　<div class="footer-more-trigger most-footer cloud-footer  J_TWidget" style="position:absolute;left:-960px;top:-10px;height:99999px;width:1920px;border:0px;padding:0px;overflow:visible;z-index:1;display:block;background:url(http://img.alicdn.com/imgextra/i2/759415648/TB2KvPydVXXXXaUXXXXXXXXXXXX_!!759415648.jpg) 50% 0px repeat-y fixed transparent;" data-source="在线生成-艺灵设计：www.yilingsj.com/zxsc" data-maketime="2015/10/31 下午11:15:28">	
　　</div>
　</div>
</div>

上面的代码实现了全屏背景固定的效果，当然了，代码是直接用软件生成的。如果看官想使用这个效果又不会代码，可以使用艺灵的免费软件→→全屏固定背景，戳进去后点击下方的“软件信息+视频教程”可看相关视频。

目前为止，全屏背景固定的代码及效果都已经有了，接下来我们来看下上面代码中的精华。

demo5

background:url(图片地址) 50% 0px repeat-y fixed transparent;" 
<!--进一步化简-->
background:url(图片地址) 水平坐标 垂直坐标 平铺方向 背景固定 背景色透明;" 

很多看官看到此时会觉得疑惑，这个background后面怎么可以跟这么多不认识的东东，怎么跟前面的写法完全不一样了？

当你在手册中看了background属性时就知道这是怎么一回事了。
语法：
background：[ background-color ] || [ background-image ] || [ background-repeat ] || [ background-attachment ] || [ background-position ]
取值：
[ background-color ]： 指定对象的背景颜色。
[ background-image ]： 指定对象的背景图像。可以是真实图片路径或使用渐变创建的“背景图像”
[ background-repeat ]： 指定对象的背景图像如何铺排填充。
[ background-attachment ]： 指定对象的背景图像是随对象内容滚动还是固定的。
[ background-position ]： 指定对象的背景图像位置。
[ background-origin ]： 指定对象的背景图像显示的原点。
[ background-clip ]： 指定对象的背景图像向外裁剪的区域。
[ background-size ]： 指定对象的背景图像的尺寸大小。

怎么样，demo5中的代码再能稍微理解下了吧。如果不能理解，建议多看几遍文章或手册，亲自动手练上个十来遍。

七、伪悬浮

利用demo4中的代码，我们可以做一个伪悬浮出来。这个早在 天猫店铺悬浮代码分享 一文中有介绍过，这里不再赘述。如果看官想要更加真实的可编辑的悬浮效果，可以在淘宝服务中搜索相关付费服务，都是按月收费的。当然，你也可以找艺灵低价开通......

八、结束

还是那句话：如果你想装修好淘宝店铺，必须要有扎实的div+css功底，否则，你会被一些很简单的问题困扰多天并且得不到正确的解答！

----------完----------

转载声明：
　　若亲想转载本文到其它平台，请务必保留本文出处！
本文链接：/div/2015-10-31/339.html

若亲不想直保留地址，含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载，随便修改，但请尊重艺灵的劳动成果！谢谢理解。