您现在的位置是:首页 > Javascript
当前栏目
设置背景图片大小的方法
2023-03-31 10:43:03 时间
背景图片大小设置
- 语法:background-size:宽度 高度;
- 作用:设置背景图片大小
- 取值:
取值 | 场景 |
---|---|
数字+px | 简单方便,常用 |
百分比 | 相当于当前盒子自身的宽高百分比 |
contain | 包含,将背景图片等比例缩放,直到不会超出盒子的最大 |
cover | 覆盖,将背景图片等比例缩放,直到刚好填满整个盒子没有空白 |
-
1.设置一个盒子赋予宽(400px)高(300px),并设置边框便于观察,将原图插入盒子中
-
2.第一种取值(数字+px):
- 使用数字+px 给图片设置和盒子一样的宽高
- background-size: 400px 300px;
-
3.第二种取值(百分比):
- 使用百分比给图片设置宽高都为90%
- background-size: 90% 90%;
-
4.第三种取值(contain):
- 使用 contain 将背景图片等比例缩放,直到不会超出盒子的最大
- background-size: contain;
-
5.第四种取值(cover):
- 使用 cover 将背景图片等比例缩放,直到刚好填满整个盒子没有空白
- background-size: cover;
相关文章
- TiDB Binlog 组件正式开源
- 使用Visual Studio Code对Node.js进行断点调试
- 推荐!数据可视化的十种优秀JavaScript图表库
- Node.js在复杂集成场景下占据统治地位的五个理由
- 玩转Node.js单元测试
- Node.js中内存泄漏分析
- Angular对React:一场关于Web开发者支持率的史诗对决
- 热点推荐:什么是后端开发?
- 谈谈Spring boot 启动层面的开发
- 使用NodeJS将文件或图像上传到服务器
- 编写React组件的最佳实践
- JavaScript MV*框架最值得关注的七个亮点
- 前端开发指南:如何利用PHP Cake框架构建应用
- 基于React与Vue后,移动开源项目Weex如何定义未来
- NodeJS和C++之间的类型转换
- jQuery中的常用到的三十九个技巧
- 官宣|Google Developers中国网站发布!
- NodeJS和C++之间的类型转换
- .NET Core首例Office开源跨平台组件(NPOI Core)
- 如何写出漂亮的React组件