在css中,可以利用background-size属性设置背景图片的大小,该属性可以指定背景图像的尺寸,语法格式“background-size: 带长度单位的数值|百分比值|cover|contain;”。

本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。
在css中,可以利用background-size属性设置背景图片的大小;可以长度值或百分比显示,还可以通过cover和contain来对图片进行伸缩。
background-size:auto;/* 默认值,不改变背景图片的高度和宽度 */ background-size:100px 50px;/* 第一个值为宽,第二个值为高,当设置一个值时,将其作为图片宽度来等比缩放 */ background-size:10%;/* 0%~100%之间的任何值,将背景图片宽高按百分比显示,当设置一个值的时候同也将其作为图片宽度来等比缩放 */ background-size:cover;/* 将背景图片等比缩放填满整个容器 */ background-size:contain;/* 将背景图片等比缩放至某一边紧贴容器边缘 */
属性值:
| 值 | 描述 |
|---|---|
| length |
设置背景图像的高度和宽度。 立即学习“前端免费学习笔记(深入)”; 第一个值设置宽度,第二个值设置高度。
偶然网络.net2.0企业网站管理系统 (Vc1)
下载
系统简介:后台:一、管理员管理,可以修改管理员名称及密码;三、上传管理:此管理在网站基本设置中,可以在增加产品时上传的图片及其他文件。四、企业信息:可设置修改企业的各类信息及介绍。 五、产品管理:产品类别新增修改管理,产品添加修改。六、下载中心:可分类增加各种文件,如驱动和技术文档等文件的下载。七、新闻管理:能分大类和小类新闻,不再受新闻栏目的限制。 八、荣誉管理:新增修改企业荣誉栏目的信息。新增 如果只设置一个值,则第二个值会被设置为 "auto"。 |
| percentage |
以父元素的百分比来设置背景图像的宽度和高度。 第一个值设置宽度,第二个值设置高度。 如果只设置一个值,则第二个值会被设置为 "auto"。 |
| cover |
把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。 背景图像的某些部分也许无法显示在背景定位区域中。 |
| contain | 把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。 |
代码示例:
上面是缩小的背景图片。
原始图片:
@@##@@
效果图:
(学习视频分享:css视频教程)










