Discuz模板|Discuz插件|Discuz教程|Discuz素材免费下载

 找回密码
 立即注册

QQ登录

只需一步,快速开始

温馨提示:本站所有DZ相关模板、插件、教程(包括DZ应用中心已下架插件、模板)所有用户可全部免费下载,无任何收费模式(不包括VIP版块非DZ资源,VIP版块需购买会员组方可下载),如本站没有您需要的插件或模板,请自行前往淘宝互站网送码网等第三方站点搜索相关插件或模板进行低价格购买下载本站非常不建议用户浪费金钱前往DZ应用中心购买。

CSS背景图标尺寸background-size背景图片尺寸属性

[复制链接]
tuyuanma 发表于 2020-12-7 11:39:56 | 显示全部楼层 |阅读模式
温馨提醒:禁止内容附带广告图片、二维码图片,否则将在不通知情况下永久禁言账号!
欢迎加入兔源码站长交流群,您的加入是我们前行的动力!

DZ站长建站交流群:493651246

[ 温馨提示:点击上方群文字,可快速加入QQ群 ]


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,那么其背景相对区域就是初始包含块也就是视窗。

  1. /* 一个值: 这个值指定图片的宽度,那么第二个值为auto */
  2. background-size: auto
  3. background-size: 50%
  4. background-size: 3em
  5. background-size: 12px

  6. /* 两个值: 第一个值指定图片的宽度,第二个值指定图片的高度 */
  7. background-size: 50% auto
  8. background-size: 3em 25%
  9. background-size: auto 6px
  10. background-size: auto auto
  11. /*多重背景,请用逗号隔开,在CSS语法中凡语法后跟*或者#,都是可以无限重复的,但是必须用逗号隔开。 */
  12. background-size: auto, auto     /* 不要跟background-size: auto auto混淆了 */
  13. background-size: 50%, 25%, 25%
  14. background-size: 6px, auto, contain

  15. background-size: inherit
复制代码
2、contain,按比例调整背景图片,使得其图片宽高比自适应整个元素的背景区域的宽高比,因此假如指定的图片尺寸过大,而背景区域的整体宽高不能恰好包含背景图片的话,那么其背景某些区域可能会有空白。看以下代码
  1. .im-com{
  2.     width:200px;
  3.     height:50px;   
  4.     background:url(http://img.xiaoho.com/mystar/mada4.jpg) no-repeat top left scroll;   /*图片的宽高为440*440,而元素相对区域高度为50*/
  5.     background-size:contain;
  6. }
  7. .im-com-1{
  8.     width:50px;
  9.     height:100px;   
  10.     background:url(http://img.xiaoho.com/mystar/mada4.jpg) no-repeat top left scroll;   /*元素相对区域宽度为50*/
  11.     background-size:contain;
  12. }
复制代码
当图片恰好自适应铺满元素的宽度或者高度,那么元素的会有空白处存在,也就是图中红色框框都显示了空白。

2、cover,按比例调整背景图片,这个属性值跟contain正好相反,背景图片会按照比如自适应铺满整个背景区域。假如背景区域不足以包含背景图片的话,那么背景图片就会被咔嚓。

  1. .im-com{
  2.     width:200px;
  3.     height:50px;   
  4.     background:url(http://img.xiaoho.com/mystar/mada4.jpg) no-repeat top left scroll;   /*图片的宽高为440*440,而元素相对区域高度为50*/
  5.     background-size:cover;
  6. }
  7. .im-com-1{
  8.     width:50px;
  9.     height:100px;   
  10.     background:url(http://img.xiaoho.com/mystar/mada4.jpg) no-repeat top left scroll;   /*元素相对区域宽度为50*/
  11.     background-size:cover;
  12. }
复制代码
当使用了 cover 这个值的时候,那么正好就跟contain相反,其会正好覆盖整个背景相对区域,但是背景图片的某些部分就看不见,如下图的狗的下半身和右侧身体显示不全。

说说背景图片计算值
假如说只是拿单一的数值或者具体数值来解释那理解起来应该不难,但假如用混合长度来说,可能会有点一下子明白不上来。

规范给了几个例子,不妨拿出来一下:先声明,所以的元素尺寸为 100*100
  1. 100% 100%背景图片将铺满整个内容区,假如说元素有固有宽高,那么背景图片铺满整个100*100背景区域

  2. div {
  3.     background-image: url(plasma.png);
  4.     background-repeat: no-repeat;
  5.     background-size: 100% 100%;
  6.     background-origin: content-box }
  7. 背景图片调整为宽度为50*50,但是背景图片的原点位置为边框box而不是padding-box
  8. p {
  9.     background-image: url(tubes.png);
  10.     background-size: 50% auto;
  11.     background-origin: border-box }
  12. 背景图片尺寸调整为15*15
  13. para {
  14.     background-size: 15px 15px;
  15.     background-image: url(tile.png)}
  16. 这是默认值,也就是auto auto,此时背景图片的尺寸将会是跟图片的固有尺寸一样.

  17. body {
  18.     background-size: auto;            /* 默认值 */
  19.     background-image: url(flower.png) }
  20. 假如两个都是百分比,此时图片就会根据背景区域来按照宽高比自适应,此处背景图片为20*30,但是因为背景重复用了 'round'循环,因此背景区域高度划分了3个33.3等高区域,所以背景图片会自适应调整为20*33.3
  21. p {
  22.     background-image: url(chain.png);
  23.     background-repeat: no-repeat round;
  24.     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就发挥其重要的作用了,我们可以通过对背景图片大小的自适应缩放,而不会影响到起美观性又能全部显示我们所需要的效果。

版权声明
1、转摘或引用本站内容资源须注明原网址,并标明本站网址(兔源码www.tuyuanma.com);
2、对于转摘或引用本站内容资源而引起的民事纠纷、行政处罚或其他损失,本站不承担责任;
3、对于不遵守本声明或其他违法、恶意使用本站内容者,本站保留其追究法律责任的权利。




自动排版 | 高级模式
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

493651246站长邮箱:tuyuanma@qq.com 站长QQ:3197813386

© 2015-2021 本站内容皆来自互联网及用户分享,如需删除请提供软著或商标证书。

快速回复 返回顶部 返回列表