Css插入背景图片并且填充满整个容器
1、首先插入背景图:background-image: url(图片地址);2、使得图片填充整个容器:background-size: cover; 需要注意的是,被填充的容器要预先设置宽高。 华...
1、首先插入背景图:
background-image: url(图片地址);
2、使得图片填充整个容器:
background-size: cover;
需要注意的是,被填充的容器要预先设置宽高。
华丽丽分界线
background-size使用语法有下面四种情况
background-size: length|percentage|cover|contain
length用法:
background-size:100px; //背景图片显示的宽和高为100像素
background-size:100px 160px;//背景图片显示的宽为100像素,高为160像素
percentage用法:
background-size:60%; //背景图片的显示宽度和高度是图片大小60%;
background-size:60% 80%; // 背景图片的显示宽度是图片大小的60%,高度是80%;
cover用法:
background-size:cover; //把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
contain用法:
background-size:contain; //把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。
扩展资料
background-size属性浏览器支持
表格中的数字表示支持该属性的第一个浏览器版本号。
紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。
更多推荐
所有评论(0)