代码如下:
* {
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%;
}