较大家良好，今天咱们聊聊当前这个看起来简洁，但实际用起来简单出问题的事情——CSS背景图片平铺。我也是踩过无数个坑才搞明白的，当前分享给各位同学，希望能帮到你们，我懵了。。

CSS背景图片平铺基础知识

先来看得说下当前这个background-repeat属性， 是个狼人。 这是控制背景图片怎么反复的关键。它有几个常见值：

• repeat: 默认值， 水平方向和垂直方向都反复
• repeat-x: 只在水平方向反复
• repeat-y: 只在垂直方向反复
• no-repeat: 不反复
• space: 和repeat差不更多，但会留空白间距让图片间隔均匀排布不裁剪边缘一部分。
• round: 会自动缩放每张图片使它们恰良好能彻底填充容器而不裁剪任意一部分。

举个例子：你有一个,要给它设置一张较小较小的背景花纹， 拉倒吧... 然后让这张花纹满满地填充整个div。那代码能够这样写：

.box {
width: 500px;
height: 300px;
background-image: url;
background-repeat: repeat;
}

注意！默认情况下背景图片是会反复平铺的哦！即使你没写background-repeat: repeat;也会自动这么做，你看啊...。

横向平铺

操作一波... 如果你想让一条横线或者某种横条纹效果从左到右一直延伸， 比如导航栏底部那条细线哪些的，就能够用repeat-x

纵向平铺

如果需要类似侧边栏那样垂直方向一直往下延伸的装饰条呢？就用repeat-y:

.sidebar {
width:25%;
float:left;
padding:1em;
background-image:url;
background-repeat:repeat-y;

拉伸覆盖全屏

有时候我们希望整个网页或者某个区域被一个较大图彻底覆盖住,而且不要这是因为窗口较大较小改变而出现滚动条或空白区域.这种情况就该用到另一个十分沉关键属性了:background-size.

.fullscreen-bg{
position:fixed;
top:0;
right:0;
bottom:0;
left :0 ;
z-index:-9999 ;
background :url no -repea t center center / cover ; } 

附带说明几点注意事项:

• 父容器必须要有明确较高度 !!! 否则有可能看不到效果 .比如上面那个地方的.fullscreen-bg必须要加上position固定定位 +四边贴顶+超较大z-index才能全屏体现 .
• 路径一定要正确 !!! 否则浏览器根本找不到资源条件 ,天然没办法呈现出来 .特别是相对路径要特别注意当前目录结构是哪些样子 。
• 有时候写了CSS代码却发觉没生效 ,有可能是被其他更较高优先级的样式覆盖掉了 .提议采用开发者工具检查下哪里出错了 ~~~~

真实实案例解析:

虚假设当前有这么一个需求 :