body设置height:100%，背景图的大小为contain，但是显示body高度为0，背景图不显示

代码如下：

* {
     margin: 0;
     padding: 0;
 }
 body{
     height:100%;
     background: url(./images/product.jpeg) no-repeat center 0;
     /* 图片等比例缩放, 当宽度或高度和盒子尺寸相等, 图片就不再缩放 */
     background-size: contain;

     /* 图片等比例缩放, 图片完全覆盖到整个盒子, 可能会导致图片显示不全 */
     /* background-size: cover; */
 }

显示：

原因：元素的高度如果设置为百分比的话，要么由内容撑开，要么由父元素得到，如果父元素没有高度，那么这个百分比是没有用的。 由于我们没有给html设置高度，所以浏览器渲染的时候并没有高度。

解决方案：给html加高度100%

html{
     height: 100%;
 }