<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>背景</title> <style> div{ width: 300px; height: 300px; border: 10px solid red; background-image:url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1493309945592&di=b3051d0bce128fd8b75d9c0b9c2ee033&imgtype=0&src=http%3A%2F%2Fpic67.nipic.com%2Ffile%2F20150514%2F21036787_181947848862_2.jpg) ; background-size: cover; } /*img{ 100%; height: 100%; }*/ </style> </head> <body> <!-- 若容器没设置宽高 容器中的内容可以把容器撑起来 但背景不会占用容器的宽高 --> <div> <!--<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1493309945592&di=b3051d0bce128fd8b75d9c0b9c2ee033&imgtype=0&src=http%3A%2F%2Fpic67.nipic.com%2Ffile%2F20150514%2F21036787_181947848862_2.jpg" />--> </div> </body> </html> <!-- background 背景 background-color 背景色 background-image 背景图片 background-repeat 背景图片是否重复 background-position 背景位置 background-attachment 背景图片是否滚动 --> <!-- background-position:; 传两个参数 分别代表X和Y 可以直接传参数例如 background-position:10px 10px; 也可以传关键字 X关键字有：Center，left，right//分别代表中间，左边，右边 Y关键字有：top，center，bottom//分别代表上边，中间，下边 若不传参数，则默认0px 0px或者left top --> <!-- background-attachment：; scoll 背景滚动（默认属性） fixed 背景固定 --> <!-- 背景还可以按照复合属性写法来写 -->