<!--有图片的就要有内容 background:url(images/123.jpg); 加载背景 background-size 100% 400px; 宽度本身第一层就可以定义 高度以第二层div高度为限制 background-repeat: no-repeat;只显示一张图片 background-position:center;图片居中 -->
<div style="background:url(images/123.jpg);background-size: 100% 400px;background-repeat: no-repeat;background-position:center;">
<!-- 宽度以父类为标准 外层图片的大小-->
<div style="width:90%;height:500px;text-align: center;">
<!-- <img src="http://www.mamicode.com/1111.jpg" style="margin:0 auto;margin-top:100px" width="20%" height="260px" > -->
<!-- 用百分比 第二层图片自适应 -->
<div style="background-position:center;background-image:url(images/1111.jpg);background-size: 20% 300px;background-repeat: no-repeat; ">
<!-- 设置内部图片大小 -->
<div style="width:500px; height:500px"></div>
</div>
</div>
</div>

效果

css 两个图层 响应跳动