92038-106.jpg

添加背景图

用 background-image 属性，在元素的背景中添加图形。
background-image属性有一个值：url，后面跟着放在括号里的图形文件路径。
路劲可以是绝对url，也可以是相对url。

在使用相对url时，如：
url(../images/bg.png)
../ 的作用是进入当前html文件的上一层目录。
images/ 的作用是进入“images文件夹”。
bg.png 指定要使用的图像文件。

image.png

HTML代码：
<div class="div1"></div>

CSS代码：

.div1 {
  width: 900px;
  height: 500px;
  background-image: url(images/bg0002.jpg);
}

三种书写方式

background-image: url(images/bg0002.jpg);
/* 路劲不加引号 */

background-image: url("images/bg0002.jpg");
/* 路劲放在双引号内 */

background-image: url('images/bg0002.jpg');
/* 路劲放在单引号内 */

以上三种书写方式都是有效的（我懒所以都不加引号）。

Web浏览器主要支持三种图片格式：GIF，JPEG，PNG。
这三种格式都有很好的压缩效果，因此在互联网中传输的速度更快。
现在还有一种比较流行的格式：SVG。

背景图的平铺方式

使用 background-repeat 来控制背景图的平铺方式。

分别有6个值可选：repeat，no-repeat，repeat-x，repeat-y，round，space。

repeat
默认值，会把图片从左到右，从上到下铺满整个背景。

image.png

background-image: url(images/quan.png);
background-repeat: repeat;

所用到的图片：

image

no-repeat

图像只显示一次，不进行平铺。是一个非常常用的值。

image.png

background-image: url(images/quan.png);
background-repeat: no-repeat;

repeat-x

沿着X轴横向平铺图像

image.png

background-image: url(images/quan.png);
background-repeat: repeat-x;

repeat-y

沿着Y轴竖向平铺图像

image.png

background-image: url(images/quan.png);
background-repeat: repeat-y;

round

round平铺图像的方式和repeat一样，不过不会裁剪图像。背景图不会被裁剪，而是被缩放，并排着一列列显示。为了做到这一点，浏览器会扭曲各个图像副本，因此会破坏图像的纵横比。

image.png

background-image: url(images/quan.png);
background-repeat: round;

由于我所用的背景图比较小，所以变形的效果不明显。
这次用的是Firefox浏览器。

space

space平铺图像的方式与repeat一样，但是不会裁剪图像的上部或下部。也就是说，space选项始终显示完整的图像。因此，浏览器会在平铺的各个图像副本之间添加间隙。

image.png

background-image: url(images/quan.png);
background-repeat: space;

放大图片和repeat的图对比，可以看出使用space的图，圈圈之间是有一定空隙的。
这次用的是Firefox浏览器。

注意：在做这个笔记的时候（2017.11）round和space的兼容性都很差。并不是所有浏览器都兼容。

定位背景图

background-position

用 background-position 属性控制图像位置。可以通过 关键字、具体的值、百分比 来控制背景的横向和纵向的起点。

关键字
横向：left，center，right。
纵向：top，center，bottom。

image.png

HTML代码：
<div class="div1"></div>

CSS代码：

.div1 {
    width: 900px;
    height: 500px;
    border: 1px solid #000;
    background-image: url(images/quan.png);
    background-repeat: no-repeat;
    background-position: center;
}

那个圈圈的背景图就会出现在div中央。因为 background-position 设置了 center。
如果只写一个 center，浏览器会解析为 x轴 和 y轴 都用了center属性，所以纵横都是居中。

在使用关键字时，定义横向和纵向的顺序不重要。如 background-position:top right; 和 background-position: right top; 都是一样的，浏览器会自动识别关键字。

我习惯先写横向，再写纵向。

image.png

image.png

image.png

image.png

image.png

精确的值

可以使用 像素 或 em 来设定背景图的位置。
需要指定2个值，第一个值控制横向位置，第二个值控制纵向位置。
（第一个值指明图像的左边与容器的左边之间的距离，第二个值指明图像的上边与容器的上边之间的距离。）

如

image.png

background-position: 5px 20px;

值：坐负右正，上负下正。
可以使用负值，把背景图移出左边或上边，隐藏部分图像。

注意：使用像素或em尺寸时无法指定距离底边或右边的距离，如果要把背景图放在页面或目标元素的右下角，应该使用关键字（right bottom），或者使用百分比。

百分比值

使用百分比值，可以把背景图定位在与元素宽度成一定比例的某个点上。

但我从开发中得到的一个经验是：如果能使用精确的值（像素或em）或者关键字来实现所需的效果，就尽量不要使用百分比。因为百分比值在定位背景图很难处理。

如
background-position: 0% 0%;

image.png

background-position: 50% 50%;

image.png

background-position: 100% 100%;

image.png

看看下面我画的示意图就懂了

image.png

在（80% 20%）那里，背景图（80% 20%）的点和目标元素（80% 20%）的点是重合的，（50% 50%）和（100% 100%）也是这样。

所以说，如果能使用精确的值（像素或em）或者关键字来实现所需的效果，就尽量不要使用百分比。因为百分比值在定位背景图很难处理。

固定

可以使用 background-attachment 把背景图固定在某个位置，意思就是 背景图不随屏幕滚动而滚动。

background-attachment有2个属性：scroll 和 fixed 。

scroll是默认值，即背景图与文本和页面中的其他内容一起滚动。

fixed的作用是把被背景图固定在某个位置。比如想把页头部分固定在页面最顶端，不随页面滚动和滚动。

image.png

可以看到右侧滚动条不管怎么滚动，背景图依然是在左上角。

CSS代码：

background-image: url(images/logo0001.png);
background-repeat: no-repeat;
background-attachment: fixed;

动图好像简书无法显示~~ 可以在我的订阅号查看这个笔记：Rabbit_svip

定义背景图的起点与区域

可以使用 background-origin 属性重新定义图像的起点。
这个属性能告诉浏览器从元素的边框、内边距还是内容区域开始显示背景图。

background-origin 有三个属性：border-box、padding
-box、center-box。

border-box：从边框的左上角开始放置背景图。

image.png

可以看出，背景图是在边框开始的。

HTML代码：
<div class="div1"></div>

CSS代码：

.div1 {
    width: 300px;
    height: 300px;
    border: 10px dashed #000;
    background-image: url(images/quan.png);
    background-origin: border-box;
}

padding-box：从内边距的左上角开始放置背景图。浏览器一般使用这种方式放置背景图。

image.png

HTML代码：
<div class="div1"></div>

CSS代码：

.div1 {
    width: 300px;
    height: 300px;
    border: 10px dashed #000;
    background-image: url(images/quan.png);
    background-origin: padding-box;
}

content-box：从内容区域的左上角开始放置背景图。

image.png

CSS代码：

.div1 {
    width: 300px;
    height: 300px;
    border: 10px dashed #000;
    background-image: url(images/quan.png);
    background-origin: content-box;
}

background-clip 属性是 background-origin 的一个好搭档。

background-clip 也是有3个值：border-box、padding-box、content-box。

border-box：让背景图只显示在内容和边框的里面。只有边框有间隙时才可以注意到（如虚线）。浏览器一般以这种方式来显示。
这里就不再举例了。

padding-box：让背景图只在内边距区域和元素的内容里面显示。

image.png

这时边框上是没有任何背景图的。

HTML代码：
<div class="div1">content</div>

CSS代码：

.div1 {
    width: 300px;
    height: 300px;
    border: 10px dashed #000;
    background-image: url(images/quan.png);
    background-origin: padding-box;
    background-clip: padding-box;
}

content-box：让背景图只显示在内容区里面。

image.png

注意我的代码是有 10px 的 padding。

HTML代码：
<div class="div1">content</div>

CSS代码：

.div1 {
    width: 300px;
    height: 300px;
    border: 10px dashed #000;
    background-image: url(images/quan.png);
    background-origin: padding-box;
    background-clip: content-box;
}

我经常用的搭配方式：

background-origin: content-box;
background-clip: content-box;

image.png

让背景图完整的显示在内容区里面。

注意：IE8及之前的版本都不支持 background-origin 和 background-clip 属性。

缩放背景图

通过 background-size 属性可以控制背景图的尺寸。

background-size可以通过 精确的值、百分比、关键字 来控制。

精确的值

background-size: 100px 200px;
第一个值控制 宽 ， 第二个值控制 高。

通过精确值控制，有可能会改变图片原有的长宽比例。

精确值还可以结合另一种方法控制背景图。
background-size: 100px auto;
把背景图的宽度变成100px，高度随宽度自适应。

即：只设置宽度或高度，另一个值设为 auto。
根据高度或者宽度，浏览器会根据图像的纵横比自动设置另一个值，因此图像不会扭曲。

百分比

通过百分比控制宽度和高度，用法和精确的值是一样的。
background-size: 100% 100%;
会使背景图铺满整个载体容器。使用百分比来控制背景图大小，也很容易把图像扭曲。

关键字

contain、cover。

contain：会根据元素的背景尺寸强制调整图像的尺寸，而且会保留图像的纵横比。

使用contain时，浏览器会找到载体容器比较小的一条边。
比如

width: 100px;
height: 200px;

这时，浏览器就会找到100px，然后把图像的宽变成100px，高度自适应。

image.png

再如

width:300px;
height:150px;

这时，浏览器会找到150px，然后把图像的高度变成150px，宽度自适应。

image.png

cover：强制让图像的宽度适应元素的宽度，让图像的高度适应元素的高度。
cover和contain相反，cover会选择较大的那边做参考边。

如

width: 100px;
height: 200px;

image.png

因为height比width要大，所以背景图的高度和height设置的高度一样，背景图的宽度根据原图的比例进行放大。

再如

width:300px;
height:150px;

image.png

此时width比height大，所以背景图的宽度等于width，背景图的高度随原图的比例进行放大。

注意，contain 和 cover 都不会改变原图的比例。

简写方式

background: url(quan.png) center center / 50% no-repeat fixed #FFF;

翻译一下：
background: 文件路劲（url） 定位（position：center） / 大小（size：50%） 平铺方式（repeat） 固定方式（fixed） 背景色（#FFF）；

如果指定位置（background-position: center） 和 background-size 属性，二者中间要加上 / 符号。

注意：IE8不支持 background-size、background-origin 和 background-clip 属性。如果在简写的 background 属性中设置这几个属性，IE8会忽略整个生命，不应用在任何背景属性。

在简写的时候不是所有属性都要全部指定，而且通常不会全部指定。可以只指定一个属性，或者任意组合各个属性。

简写时的其他注意事项：

background-color: yellow;
background: url(quan.png) no-repeat;

这时，黄色背景是完全看不到的。因为在第二行代码中用了简写方式，浏览器遇到没有指定颜色的background属性（简写）时，会把 background-color 设为 transparent（透明），从而把上一行 background-color 属性覆盖掉。

解决方法：

background: url(quan.png) no-repeat;
background-color: yellow;

把“详细属性”放在“简写属性”后面，只会覆盖“简写属性”的部分值。所以在使用简写属性的时候，一定要注意书写顺序！

HTML与CSS 目录：HTML与CSS

上一篇：【CSS】着色与透明

下一篇：【CSS】同时使用多个背景图