如何使用CSS3属性background-size设置图片缩放
- 原创
- |
- 浏览：2651
- |
- 更新：
- |
- 标签：CSS
![如何使用CSS3属性background-size设置图片缩放]()
1![如何使用CSS3属性background-size设置图片缩放]()
2![如何使用CSS3属性background-size设置图片缩放]()
3![如何使用CSS3属性background-size设置图片缩放]()
4![如何使用CSS3属性background-size设置图片缩放]()
5![如何使用CSS3属性background-size设置图片缩放]()
6![如何使用CSS3属性background-size设置图片缩放]()
7
CSS3中新增了控制图片缩放的属性background-size，这个属性主要用来控制图片缩放，取值有具体的像素值、百分比、cover和contain。下面利用一个实例说明background-size的用法，操作如下：
方法/步骤
第一步，在HBuilder编辑工具里新建静态页面backgroundSize.html，如下图所示：
![如何使用CSS3属性background-size设置图片缩放]()
第二步，向主体body元素里插入一个div，设置id值为bg，如下图所示：
![如何使用CSS3属性background-size设置图片缩放]()
第三步，分别设置body和div的样式属性，div元素的背景是一张图片，如下图所示：
![如何使用CSS3属性background-size设置图片缩放]()
第四步，添加background-size属性，设置值为cover，如下图所示：
![如何使用CSS3属性background-size设置图片缩放]()
- 相关内容非法爬取自百度经验
第五步，保存代码，预览该静态页面，发现图片显示不全，如下图所示：
![如何使用CSS3属性background-size设置图片缩放]()
第六步，将background-size的值改为contain，再次预览发现图片虽然收缩了，但是显示全部内容，如下图所示：
![如何使用CSS3属性background-size设置图片缩放]()
END
经验内容仅供参考，如果您需解决具体问题(尤其法律、医学等领域)，建议您详细咨询相关领域专业人士。
作者声明：本篇经验系本人依照真实经历原创，未经许可，谢绝转载。
展开阅读全部