关于背景图与图片的区别整理，项目实操

img图片可看做行内块元素，它的尺寸可以撑开父盒子的高度，因此往往插入图片后再浏览器中能“立竿见影”。比较好的做法是给图片套上一层盒子，设置盒子的大小后将图片的宽高设置为100%，这样在盒子尺寸变化后图片的尺寸也能相应改变。

背景图更像是背景而非图片实体，因此它无法像图片那样撑开盒子的尺寸“自行显现”，因此必须给父盒子设置尺寸后才能看到背景图，并通过background-positon属性调整背景图的位置、background-size调整背景大小。这种做法在插入精灵图时应用较多。

图片开关项目举例，背景图与图片的两种写法：

项目效果：

图片文件：

父盒子图片：

子盒子图片

一、设置图片的写法：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style> /* 背景大盒子 */.box{width: 1366px;height: 600px;margin: 100px auto;background: url(./images/bg.jpg) red;/* 溢出隐藏，实现消失效果 */overflow: hidden;}/* 左边的盒子设置宽度为大盒子的一半，且设置为溢出隐藏，这样才能实现用盒子尺寸截取图片左边部分的效果，这是图片和背景图片的不同之处 */.box .left{overflow: hidden;float: left;width: 50%;height: 100%;transition: all 1s;}/* 设置溢出隐藏，利用盒子尺寸截取图片所需部分 */.box .right{float: right;overflow: hidden;width: 50%;height: 100%;transition: all 1s;}/* 由于图片默认左上显示,故要显示右边的部分需将图片往左移动50% */.box .right img{transform: translatex(-50%);}/* 要实现消失效果则需图片移动到盒子外面,即往左100% */.box:hover .left{transform: translatex(-100%);}/* 要实现消失效果则需图片移动到盒子外面,即往右100% */.box:hover .right{transform: translatex(100%);}</style>
</head>
<body><div class="box"><div class="left"><img src="./images/fm.jpg" alt=""></div><div class="right"><img src="./images/fm.jpg" alt=""></div></div>
</body>
</html>

这种写法的要点：

由于父盒子是背景图片不占据位置，故不需用子绝父相定位将子盒子叠加上去，只需将图片设置为两张并左右浮动即可。但是图片只有一张，要显示两边的两个车子的对象，做法如下。

要实现左边盒子显示左边的车子方法：

将图片放进左边盒子中并设置盒子宽度为父盒子一半，高度100%：

要实现右边盒子显示后边车子的方法：

将图片放进右盒子中，由于图片默认左上对齐，故需要将图片用transform:translatex属性向左移动到合适位置使得有盒子的框内显示右边的车子并溢出隐藏掉左边的车子：

左右盒子摆好之后就可以进行左右移动和设置过渡，然后利用父大盒子溢出隐藏来实现开门效果了，代码见上图，过程图略。

二、设置背景图的写法：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style> .box{width: 1366px;height: 600px;margin: 100px auto;background: url(./images/bg.jpg) red;overflow: hidden;}.box .left{float: left;width: 50%;height: 100%;background: url(./images/fm.jpg) left;transition: all 1s;}.box .right{float: left;width: 50%;height: 100%;background: url(./images/fm.jpg) right;transition: all 1s;}.box:hover .left{transform: translatex(-100%);}.box:hover .right{transform: translatex(100%);}</style>
</head>
<body><div class="box"><div class="left"></div><div class="right"></div></div>
</body>
</html>