代码：
- 常见问题：背景填充时候图片大小不一致、重复等等问题，建议在插入图片的时候最好不用img标签直接在div中添加背景图片，有利于对背景图片的更改。
- 插入图片：
background-image: url(../img/product-auto/benz-amg-s63-01.jpg) - 图片平铺中去重操作：
background-repeat: no-repeat; - 将图片缩放到正好完全覆盖定义背景的区域。
background-size: cover; - 图片居中
background-position: center;
- css动态效果：当鼠标移动到图片时出现背景颜色把文字覆盖效果
实现鼠标移动出现如上效果步骤：
- 设置 transition 属性，all表示的是该transition所在的style中所设置的所有属性都有过渡效果，.5s表示显示的时长，否则时长为 0，就不会产生过渡效果。
transition: all .5s ease; - 鼠标移动事件效果，transform属性允许我们对元素进行旋转、缩放、移动或倾斜。rotate旋转 、translateY向上移动。
.container:hover .img {transform: rotate(-2deg)}
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style>* {margin: 0px;padding: 0px;}.container {display: inline-block;margin: 10px 0px 0px 10px;height: 300px;width: 200px;border-radius: 20px 20px 0px 0px;overflow: hidden;box-shadow: 0px 0px 10px black;position: relative;}.container:hover .img {transform: rotate(-2deg)}.container:hover .buy {transform: translateY(-100px)}.img {height: 200px;width: 200px;background-repeat: no-repeat;background-size: cover;background-position: center;transition: all .5s ease;}.content {height: 100px;width: 200px;font-family: "微软雅黑";text-indent: 10px;}.title {font-size: 24px;color: #212121;}.detail {margin-top: 6px;color: #616161;}.price {margin: 6px 10px 0px 0px;text-align: right;color: #F57C00;}.buy {height: 100px;width: 200px;background-color: lightblue;opacity: .7;position: absolute;top: 300px;transition: all .5s ease;}.border {border: 1px solid red;}</style></head><body><div class="container "><div class="img" style="background-image: url(../img/product-auto/benz-amg-s63-01.jpg);"></div><div class="content "><div class="title">Benz</div><div class="detail">Bean 0-100km 4.4s</div><div class="price">$60,000</div></div><div class="buy"></div></div><div class="container "><div class="img" style="background-image: url(../img/product-auto/benz-amg-s63-01.jpg);"></div><div class="content "><div class="title">Benz</div><div class="detail">Bean 0-100km 4.4s</div><div class="price">$60,000</div></div><div class="buy"></div></div></body>
</html>
