CSS3:background-size背景图片尺寸属性-Discuz教程下载
登录
/
注册
首页
Portal
Discuz模板
Discuz插件
Discuz教程
DIV模块素材
站长导航
问题反馈
Discuz!数据字典
TAG标签
站长工具
Discuz站长交流群欢迎您的加入:493651246
兔源码站长交流群:493651246 欢迎您的加入!
Discuz站长2000人QQ交流群:493651246
站长工具
Favicon图标转换器
提供在线裁剪图片,并转换为favicon.ico文件。
CSS美化工具
提供在线 CSS 代码在线格式化和美化。
二维码生成器
快速生成二维码,自定义大小、生成码及颜色。
HTML编辑器
输入HTML、CSS、JS代码,实时运行效果。
Markdown编辑器
编写markdown代码,并在浏览器中实时预览。
SQL格式化
实现SQL语句的在线压缩与格式化功能。
URL编码解码
在线将普通URL相互转换转为编码URL的工具。
随机密码生成器
提供在线生成随机卡密等等。
站长导航
站长工具
开发工具
站长平台
IDC服务商
注册交易
SEO及安全
开放平台
CDN及SSL
源码资源
自媒体平台
图片工具
小程序平台
投资理财
常用工具
友情链接
网络硬盘
TAG标签
Discuz
网站模板
discuz插件
免费
原创
商业版
文章
下载地址
GBK
门户
手机版
自适应
模板
插件
编辑器
UTF8
数据库
伪静态
博客
论坛
模块
分类信息
主题
全部TAG
Discuz!数据字典
站长之家
[
QQ登录
/
登录
/
注册
]
Discuz站长群邀您加入
草根站长交流群欢迎您
广告招租:3197813386
网站一条龙搭建服务
——网站快速搭建——
——建网站,找我们——
首页
Portal
Discuz模板
Discuz插件
Discuz教程
DIV模块素材
站长导航
问题反馈
搜索
搜索
本版
文章
帖子
用户
帖子
勋章
设置
收藏
退出
CSS3:background-size背景图片尺寸属性
来自
版块
:
Discuz教程
发表于:
2021-1-8 08:38:34
15279
如本资源下载地址失效,请点击此处进行反馈
background-size 可以设置背景
图片
的大小,数值包括 长度length和百分比percentage。 并且会根据背景原点位置 background-origin 设置其图片覆盖的范围。那么下面我们一起来了解这个background-size属性吧。
background-size语法
w3c对background-size的语法规定如下:
属性名:
background-size
属性值:
<bg-size>* 其中 bg-size = [ <length> | <percentage> | auto ]{1,2} | cover | contain
初始值:
auto auto
应用于:
所有元素
继承性:
无
百分比:
见下文注解
计算值:
根据指定
语法解释
1、length,percentage,根据给定长度值或者百分比来调整背景图片大校auto为默认值,这三个值最小可重复一次,最大重复两次。对于这些值有以下解释:
第一个值为设置图片宽度,第二个值为图片的高度;但是不管是用什么值,都不能为负值
假如只给定一个值,那么第二个自动的为 'auto';
假如指定为 percentage百分比值,那么背景图大小是根据相对的背景区域来做调整,这个背景区域是由background-origin来来决定的。这在上面已经有提到过了关于图片原点的讨论。这里有必要提到 假如background-attachment:fixed,那么其背景相对区域就是初始包含块也就是视窗。
/* 一个值: 这个值指定图片的宽度,那么第二个值为auto */
background-size: auto
background-size: 50%
background-size: 3em
background-size: 12px
/* 两个值: 第一个值指定图片的宽度,第二个值指定图片的高度 */
background-size: 50% auto
background-size: 3em 25%
background-size: auto 6px
background-size: auto auto
/*多重背景,请用逗号隔开,在
CSS
语法中凡语法后跟*或者#,都是可以无限重复的,但是必须用逗号隔开。 */
background-size: auto, auto /* 不要跟background-size: auto auto混淆了 */
background-size: 50%, 25%, 25%
background-size: 6px, auto, contain
background-size: inherit
复制代码
2、contain,按比例调整背景图片,使得其图片宽高比自适应整个元素的背景区域的宽高比,因此假如指定的图片尺寸过大,而背景区域的整体宽高不能恰好包含背景图片的话,那么其背景某些区域可能会有空白。看以下代码
.im-com{
width:200px;
height:50px;
background:url(http://tuyuanma.com/mada4.jpg) no-repeat top left scroll; /*图片的宽高为440*440,而元素相对区域高度为50*/
background-size:contain;
}
.im-com-1{
width:50px;
height:100px;
background:url(http://tuyuanma.com/mada4.jpg) no-repeat top left scroll; /*元素相对区域宽度为50*/
background-size:contain;
}
复制代码
当图片恰好自适应铺满元素的宽度或者高度,那么元素的会有空白处存在,也就是图中红色框框都显示了空白。
2、cover,按比例调整背景图片,这个属性值跟contain正好相反,背景图片会按照比如自适应铺满整个背景区域。假如背景区域不足以包含背景图片的话,那么背景图片就会被咔嚓。
.im-com{
width:200px;
height:50px;
background:url(http://tuyuanma.com/mada4.jpg) no-repeat top left scroll; /*图片的宽高为440*440,而元素相对区域高度为50*/
background-size:cover;
}
.im-com-1{
width:50px;
height:100px;
background:url(http://tuyuanma.com/mada4.jpg) no-repeat top left scroll; /*元素相对区域宽度为50*/
background-size:cover;
}
复制代码
当使用了 cover 这个值的时候,那么正好就跟contain相反,其会正好覆盖整个背景相对区域,但是背景图片的某些部分就看不见,如下图的狗的下半身和右侧身体显示不全。
说说背景图片计算值
假如说只是拿单一的数值或者具体数值来解释那理解起来应该不难,但假如用混合长度来说,可能会有点一下子明白不上来。
规范给了几个例子,不妨拿出来一下:先声明,所以的元素尺寸为 100*100
100% 100%背景图片将铺满整个内容区,假如说元素有固有宽高,那么背景图片铺满整个100*100背景区域
div {
background-image: url(plasma.png);
background-repeat: no-repeat;
background-size: 100% 100%;
background-origin: content-box }
复制代码
背景图片调整为宽度为50*50,但是背景图片的原点位置为边框box而不是padding-box
p {
background-image: url(tubes.png);
background-size: 50% auto;
background-origin: border-box }
复制代码
背景图片尺寸调整为15*15
para {
background-size: 15px 15px;
background-image: url(tile.png)}
复制代码
这是默认值,也就是auto auto,此时背景图片的尺寸将会是跟图片的固有尺寸一样.
body {
background-size: auto; /* 默认值 */
background-image: url(flower.png) }
复制代码
假如两个都是百分比,此时图片就会根据背景区域来按照宽高比自适应,此处背景图片为20*30,但是因为背景重复用了 'round'循环,因此背景区域高度划分了3个33.3等高区域,所以背景图片会自适应调整为20*33.3
p {
background-image: url(chain.png);
background-repeat: no-repeat round;
background-size: 20% 30% }
复制代码
在
MND帮助文档
中还提到了关于火狐的渐变图片背景问题,不过那是涉及到Firefox8,规范中不推荐同时使用px和auto,因为在8以前的火狐浏览器不支持重复渲染,但是我在caniuse上看见的版本是31+,so,你就尽情的用吧。并且对于移动浏览器的支持还是非常的好的,请看下图可知,除了opera8部分不支持以外:
应用场景
目前用到 background-size的场景都是基于webapp的背景图上,大致的情况是,比如说最常见的logo作为某个元素的背景,但logo很复杂,假如说我们按照设计图上的去切片的话,那会有两种可能:
1、按照csser的分辨率去切片,比如高度为50px,logo被直接缩放到50px那就会很别扭,而且估计那那画面太美,你都不敢看;
2、按照射击湿设计的分辨率去切的话,有可能设计图的logo尺寸会很大,但是我们csser写的时候高度只有50px,那logo就会显示不全;
这时候background-size就发挥其重要的作用了,我们可以通过对背景图片大小的自适应缩放,而不会影响到起美观性又能全部显示我们所需要的效果。
CSS
,
size
,
背景
,
图片
,
尺寸
,
属性
相关帖子
【实测】 css左右滑动菜单
【原创】调用帖子内容页封面图片,提升搜索引擎优化
js实现滚动条下拉加载图片功能
文字由左向右循环滚动DIY+CSS+js模块
垂直时光轴HTML单页+CSS+js模块
html5+css3的四排图文资讯列表DIY模块
discuz 帖子列表页调用封面图片代码
【原创】JS检测网站ICO图片地址是否存在,如果存在则调用该网站ICO地址,如不存在则调用指定ICO地址
html5+css3的浮窗单图DIY模块
Discuz浮窗多图的DIY单页素材
回复
举报
综合
最新
热度
发表评论
教程 / CSS+DIV素材
Discuz教程
CSS+DIV素材
1
【原创】将文章访问量转换为K的的显示样式,如将21302转换为21.3
363人阅读
2
【原创】discuz论坛分类信息中,帖子发布页有多个图片上传功能,
615人阅读
3
【原创】修改discuz门户文章发布时间,将默认时间yyyy-mm-dd修改
589人阅读
4
【实测】Discuz修改论坛列表页排序,实现主题帖子按最新发表时间
710人阅读
5
Discuz! X3.2 - X3.4 升级至 Discuz! X3.5 详细教程
679人阅读
1
Discuz浮窗多图的DIY单页素材
657人阅读
2
html5+css3的浮窗单图DIY模块
705人阅读
3
html5+css3的横排导航列表DIY模块
794人阅读
4
html5+css3的四排图文资讯列表DIY模块
793人阅读
5
垂直时光轴HTML单页+CSS+js模块
1453人阅读
发布新话题
所属版块
返回版块
最佳新人
注册账号后积极发帖的会员,发帖数 ≥ 100
管理/版主
此勋章为兔源码管理或版主专属勋章
土豪装逼
此勋章为兔源码土豪装逼勋章,只要100兔币购买即可
返回顶部