博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
CSS知识之 background-size 用法详细介绍
阅读量:7108 次
发布时间:2019-06-28

本文共 783 字,大约阅读时间需要 2 分钟。

background-size是CSS3新增的比较实用的属性,使用它可以随心所欲地控制背景图的显示大小,而在css2中背景图的大小是不可控制的。

基本语法:

  • 用于设置背景图片的大小,有2个可选值,第1个值用于指定背景图的width,第2个值用于指定背景图的height,如果只指定1个值得,则第2个值默认为auto;

  • 初始值:auto;

  • <length>由浮点数字和单位标识符组成的长度值,不可以为负值;
  • <percentage>取值0%都100%之间的值;

  • cover 把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。

  • contain 把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。

  • 兼容性:IE9+、Firefox 4+、Opera、Chrome 以及 Safari 5+ 支持 background-size 属性。

 

例一:

图片默认宽度:200*160px

div{
width: 400px; height: 260px; border: solid 1px red; margin: 60px auto; background: url('images/img00.jpg') no-repeat; background-position: 0% 0%; background-size: auto auto;}

 

例二:background-size: 25%

 

例三:background-size: 150px 100px

 

例四:background-size: cover

 

例五:background-size: contain

 

转载于:https://www.cnblogs.com/lvmylife/p/5546751.html

你可能感兴趣的文章
渲染机制/页面性能/错误监控
查看>>
304. Range Sum Query 2D - Immutable
查看>>
css多种方式实现等宽布局
查看>>
AWS EC2 实例磁盘空间扩容
查看>>
css多种方式实现等高布局
查看>>
使用 travis + gitbook + github pages 优雅地发布自己的书
查看>>
巧用flex布局实现左侧文字溢出省略,右侧文字自适应。
查看>>
package.json文件各字段的说明
查看>>
【学习笔记】CSS深入理解之margin
查看>>
MySQL集群搭建(4)-MMM+LVS+Keepalived
查看>>
Hive database does not exist 排查
查看>>
为什么要用Log4j来替代System.out.println
查看>>
如何使用IconFont?——矢量图标
查看>>
详谈vue组件间事件派发与接收
查看>>
ApacheCN 学习资源汇总 2018.12
查看>>
用node探究下http缓存
查看>>
js实现复制粘贴功能
查看>>
前端开发中提到的“脚手架”到底指什么,CLI?gulp 和 gulp-cli有什么区别
查看>>
Ghost配置4——添加网站统计
查看>>
在keystone.js后台编辑器中上传图片
查看>>