【美高梅开户网址】对响应性图片等比例缩放

明亮CSS3中的background-size(对响应性图片等比例缩放)

2016/03/10 · CSS ·
background-size

原文出处:
涂根华   

background-size的中坚属性

background-size:
可以设定背景图像的尺寸,该属性是css3中的,在运动端应用的地方重重,比如最常见的位置在做响应性布局的时候,比如事先做的系列中有轮播图片,为了自适应分化大小分辨率的图样,我门须求选拔css3中的媒体询问来针对分裂的分辨率设置宽度和冲天,即便那种方法是可以化解难点,可是解决办法并不是太好,并且很麻烦,当然我门也想过直接使用比例设置图片的轻重,比如width(宽度):
100%,height(中度):100%;
然而安装图片等惊人100%的时候并不奏效,图片并未浮现出来,因为尚未设置具体的万丈值,浏览器渲染的时候并没有中度,由此当时缓解的形式是利用css3中的媒体询问真对不一致的分辨率等比例缩放不相同的height(中度);明日自我门再一次来学学下background-size
这一个现实的属性值,并且动用新的点子来缓解针对响应性布局的背景图片自适应。

浏览器帮助的品位:IE9+, Firefox4+, opera, chrome, safari5+;

宗旨语法:background-size: length | percentage | cover | contain; 

一:length

   
该属性值是安装背景图像的涨幅和可观的,第二个值是大幅度,第四个值是安装中度的。要是只设置首个值,那么首个值会自动转换为
“auto”;

二:percentage

    
该属性是以父元素的百分比来设置图片的大幅度和冲天的,第二个值是开间,第三个值是高度。倘诺只设置一个值,那么首个值会被设置为
“auto”;

三:cover

      把背景图像扩充至足够大,以使背景图像完全覆盖背景区域。

四:contain

      把图像扩张至最大尺寸,以使宽度和可观 完全适应内容区域。

给图片设置固定的小幅和惊人的

上面我门来做一些demo来落成下方面的多少个属性值的要旨选取方法;

着力的原图的html代码如下:

<h3>原图</h3> <div class=”images”><img
src=””
width=”100%”/></div>

1
2
<h3>原图</h3>
<div class="images"><img src="http://images2015.cnblogs.com/blog/561794/201603/561794-20160310002800647-50077395.jpg" width="100%"/></div>

成效如下图所示:

美高梅开户网址 1

给图片设置一定的宽度和高度的代码如下:

例如设置 固定宽度400px和冲天200px后的图形;

HTML代码如下:

<h3>固定宽度400px和中度200px后的图样</h3> <div
class=”bsize1″></div>

1
2
<h3>固定宽度400px和高度200px后的图片</h3>
<div class="bsize1"></div>

css代码如下:

.bsize1 { width:400px; height:200px;
backgroundnull:url(“”)
no-repeat; border:1px solid red; overflow: hidden; }

1
2
3
4
5
6
7
.bsize1 {
     width:400px;
     height:200px;
     background: url("http://images2015.cnblogs.com/blog/561794/201603/561794-20160310002800647-50077395.jpg") no-repeat;
     border:1px solid red;
     overflow: hidden;
  }

职能如下:

美高梅开户网址 2

一向宽度400px和冲天200px-使用background-size:400px 200px缩放设置

  1. 定点宽度400px和冲天200px-使用background-size:400px 200px缩放设置;

HTML代码如下:

<h3>固定宽度400px和惊人200px-使用background-size:400px
200px缩放设置<h3> <div class=”bsize1 bsize2″><div>

1
2
<h3>固定宽度400px和高度200px-使用background-size:400px 200px缩放设置<h3>
<div class="bsize1 bsize2"><div>

【美高梅开户网址】对响应性图片等比例缩放。css代码如下:

.bsize2 { background-size: 400px 200px; }

1
2
3
.bsize2 {
         background-size: 400px 200px;
  }

作用如下:

美高梅开户网址 3

永恒宽度400px和高度200px-使用background-size:400px;的缩放设置

3.
恒定宽度400px和中度200px-使用background-size:400px;的缩放设置,那么首个参数会自动转换为auto;

HTML代码如下:

<h3>固定宽度400px和冲天200px-使用background-size:400px;的缩放设置<h3>
<div class=”bsize1 bsize3″><div>

1
2
<h3>固定宽度400px和高度200px-使用background-size:400px;的缩放设置<h3>
<div class="bsize1 bsize3"><div>

css代码如下:

.bsize3 { background-size: 400px; }

1
2
3
.bsize3 {
         background-size: 400px;
}

作用如下:

美高梅开户网址 4

定位宽度400px和可观200px-使用background-size:100% 100%的缩放设置

  1. 一定宽度400px和惊人200px-使用background-size:100% 100%的缩放设置

HTML代码如下:

<h3>固定宽度400px和冲天200px-使用background-size:100%
100%的缩放设置<h3> <div class=”bsize1 bsize4″><div>

1
2
<h3>固定宽度400px和高度200px-使用background-size:100% 100%的缩放设置<h3>
<div class="bsize1 bsize4"><div>

css代码如下:

.bsize4 { background-size:100% 100%; }

1
2
3
.bsize4 {
        background-size:100% 100%;
  }

效率如下:

美高梅开户网址 5

一向宽度400px和可观200px-使用background-size:100%的缩放设置

  1. 定位宽度400px和惊人200px-使用background-size:100%的缩放设置。

HTML代码如下:

<h3>固定宽度400px和冲天200px-使用background-size:100%的缩放设置<h3>
<div class=”bsize1 bsize5″><div>

1
2
<h3>固定宽度400px和高度200px-使用background-size:100%的缩放设置<h3>
<div class="bsize1 bsize5"><div>

css代码如下:

.bsize5 { background-size: 100%; }

1
2
3
.bsize5 {
         background-size: 100%;
  }

如下所示:

美高梅开户网址 6

行使性质cover来设置背景图片

  1. 选择性质cover来设置背景图片。

HTML代码如下:

<h3>使用性质cover来设置背景图片<h3> <div class=”bsize1
cover”><div>

1
2
<h3>使用属性cover来设置背景图片<h3>
<div class="bsize1 cover"><div>

css代码如下:

.cover { background-size:cover; }

1
2
3
.cover {
        background-size:cover;
}

功用如下:

美高梅开户网址 7

利用性质contain来安装背景图片

  1. 接纳性质contain来安装背景图片。

HTML代码如下:

<h3>使用性质contain来安装背景图片<h3> <div class=”bsize1
contain”><div>

1
2
<h3>使用属性contain来设置背景图片<h3>
<div class="bsize1 contain"><div>

css代码如下:

.contain { background-size:contain; }

1
2
3
.contain {
        background-size:contain;
  }

效用如下:

美高梅开户网址 8

给图片设置width属性100%;中度自适应

8.  上边我门使用图片来做,不使用背景图片等情事下,给图片设置属性 width
= 100%的话,它的莫大会自适应的。如下HTML代码:

<h3>给图片设置属性宽度为100%的情景下,可自适应图片<h3>
<div class=”bsize-padding”><img
src=””
width=”100%”/><div>

1
2
<h3>给图片设置属性宽度为100%的情况下,可自适应图片<h3>
<div class="bsize-padding"><img src="http://images2015.cnblogs.com/blog/561794/201603/561794-20160310002800647-50077395.jpg" width="100%"/><div>

效益如下:

美高梅开户网址 9

运用另一种办法来缓解图片自适应的题材--图片自适应难点

9.
应用另一种艺术来缓解图片自适应的难点--图片自适应难点,图片宽度设置100%,页面加载时会存在高度塌陷的标题,可以行使padding-top来安装百分比率来完结自适应
padding-top = (图片的可观/图片的宽窄)*100;

如下HTML代码:

<h3>图片自适应难题,图片宽度设置100%,页面加载时会存在中度塌陷的题目</h3>
<p>能够接纳padding-top来安装百分比率来完成自适应 padding-top =
(图片的莫大/图片的宽窄)*100</p> <div
class=”cover-paddingTop”> <img
src=”;
</div>

1
2
3
4
5
<h3>图片自适应问题,图片宽度设置100%,页面加载时会存在高度塌陷的问题</h3>
<p>可以使用padding-top来设置百分比值来实现自适应 padding-top = (图片的高度/图片的宽度)*100</p>
<div class="cover-paddingTop">
      <img src="http://images2015.cnblogs.com/blog/561794/201603/561794-20160310002800647-50077395.jpg"/>
</div>

css代码如下:

.cover-paddingTop { position: relative; padding-top: 50%; overflow:
hidden; } .cover-paddingTop img{ width:100%; position: absolute; top:0;
}

1
2
3
4
5
6
7
8
9
10
.cover-paddingTop {
       position: relative;
       padding-top: 50%;
       overflow: hidden;
  }
.cover-paddingTop img{
      width:100%;
      position: absolute;
      top:0;
  }

功能如下:

美高梅开户网址 10

动用padding-top:(percentage)已毕响应式背景图片

  1. 应用padding-top:(percentage)完毕响应式背景图片

自身门都驾驭,处理在响应性布局的时候,背景图片都是等比例缩放,比如上边的行使图片的事态,使用
引入的图纸的话,那么设置她们的width属性为100%;美高梅开户网址 11
的话,中度就会等比例缩放,那是图片,可是一旦是背景图片呢?我门此前的品类中的常见的做法是根据css3媒体询问的章程来做的,按照差距手机的分辨率等不同,来等比例缩放背景图的可观,尽管那种措施是足以化解难题的,可是那种通过人肉的格局来拓展设置并不好,也很麻烦,今日自己门来上学使用padding-top这么一个品质来设置了;

心想事成的基本原理:将使用到保证元素的宽高比的技巧,为因素添加垂直方向的padding-top的值,使用比例的样式,那么些值是争论于元素的宽而定的,比如我上面的一张图片的肥瘦是1024px,高度为316px;那么现在的

padding-top = (高度 / 宽度 )* 100% = (316 / 1024)* 100% = 
30.85%;

不过只是对图纸中度和幅度缩放的放还不够,我门还非得添加
background-size:cover,
使那些特性让背景铺满元素的,不过IE8及以下不帮助该属性,由此为了兼容IE上面的浏览器,我门还须要再加一个属性
background-position: center ; 同时自身门也要力保
图片的涨幅最大等于父容器的涨幅;于是上边的HTML代码如下:

<h3>使用padding-top已毕响应性图片(图片的大幅度是1024px,中度是316px)</h3>
<div class=”column”> <div class=”figure”></div>
</div>

1
2
3
4
<h3>使用padding-top实现响应性图片(图片的宽度是1024px,高度是316px)</h3>
<div class="column">
       <div class="figure"></div>
  </div>

css代码如下:

.column{ max-width: 1024px; } .figure { padding-top:30.85%; /* 316 /
1024 */
backgroundnull:url(“”)
no-repeat; background-size:cover; background-position:center; }

1
2
3
4
5
6
7
8
9
.column{
        max-width: 1024px;
}
.figure {
         padding-top:30.85%; /* 316 / 1024 */
         background: url("http://images2015.cnblogs.com/blog/561794/201603/561794-20160310002800647-50077395.jpg") no-repeat;
          background-size:cover;
          background-position:center;
    }

效率如下:

美高梅开户网址 12

注意:具体的作用可以友善复制代码到浏览器运行下即可~

1 赞 4 收藏
评论

美高梅开户网址 13

CSS3中的background-size(对响应性图片等比例缩放),

background-size的主干质量

background-size:
可以设定背景图像的尺寸,该属性是css3中的,在运动端应用的地点重重,比如最广大的地方在做响应性布局的时候,比如事先做的品种中有轮播图片,为了自适应不相同大小分辨率的图纸,我门须求选拔css3中的媒体询问来针对不一样的分辨率设置宽度和可观,即使那种格局是可以化解难题,可是解决情势并不是太好,并且很麻烦,当然我门也想过直接利用比例设置图片的尺寸,比如width(宽度):
100%,height(中度):100%;
可是设置图片等惊人100%的时候并不奏效,图片并未展现出来,因为尚未设置具体的万丈值,浏览器渲染的时候并没有中度,因而当时解决的措施是利用css3中的媒体询问真对不一致的分辨率等比例缩放不一样的height(中度)。

浏览器协助的水准:IE9+, Firefox4+, opera, chrome, safari5+;

主导语法:background-size: length | percentage | cover |
contain; 

一:length

   
该属性值是安装背景图像的宽窄和惊人的,第二个值是涨幅,第四个值是安装中度的。即使只设置第二个值,那么第四个值会自动转换为
“auto”;

二:percentage

    
该属性是以父元素的百分比来设置图片的小幅和惊人的,首个值是大幅度,首个值是惊人。假诺只设置一个值,那么第一个值会被安装为
“auto”;

三:cover

      把背景图像增加至足够大,以使背景图像完全覆盖背景区域。

四:contain

      把图像扩充至最大尺寸,以使宽度和冲天 完全适应内容区域。

css3 background,css3

background是一个很重点的css属性,在css3中新增了成千成万情节。一方面是原来属性新增了属性值,另一方面就是新增了3个属性。

background-size的主题特性

background-size:
可以设定背景图像的尺码,该属性是css3中的,在运动端选拔的地点重重,比如最普遍的地点在做响应性布局的时候,比如事先做的门类中有轮播图片,为了自适应分裂大小分辨率的图片,我门要求使用css3中的媒体询问来针对分裂的分辨率设置宽度和高度,纵然那种格局是足以解决难点,然则解决办法并不是太好,并且很麻烦,当然我门也想过向来动用比例设置图片的大大小小,比如width(宽度):
100%,height(中度):100%;
但是设置图片等惊人100%的时候并不奏效,图片并未展现出来,因为从没设置具体的可观值,浏览器渲染的时候并不曾中度,由此当时解决的格局是利用css3中的媒体询问真对分歧的分辨率等比例缩放分裂的height(中度)。

浏览器帮助的品位:IE9+, Firefox4+, opera, chrome, safari5+;

骨干语法:background-size: length | percentage | cover |
contain; 

一:length

   
该属性值是安装背景图像的涨幅和可观的,第二个值是大幅度,第三个值是设置中度的。倘诺只设置第二个值,那么第三个值会自动转换为
“auto”;

二:percentage

    
该属性是以父元素的百分比来设置图片的增幅和冲天的,首个值是大幅度,第一个值是中度。假使只设置一个值,那么第四个值会被安装为
“auto”;

三:cover

      把背景图像增加至丰盛大,以使背景图像完全覆盖背景区域。

四:contain

      把图像扩张至最大尺寸,以使宽度和惊人 完全适应内容区域。

设置一定宽度400px和中度200px后的图形

1 <div class="bsize1"></div>

1 .bsize1 {
2      width:400px;
3      height:200px;
4      background: url("1.jpg") no-repeat;
5      border:1px solid red;
6      overflow: hidden;
7   }

美高梅开户网址 14

一、css3中新增属性值介绍

css2的background有5个特性,缩写如下:

background:background-color,background-image,background-repeat ,background-attachment, background-position;

中间background-image,background-repeat和background-position在css3中都净增了新的属性值。

设置一定宽度400px和惊人200px后的图片

1 <div class="bsize1"></div>

1 .bsize1 {
2      width:400px;
3      height:200px;
4      background: url("1.jpg") no-repeat;
5      border:1px solid red;
6      overflow: hidden;
7   }

美高梅开户网址 15

固定宽度400px和惊人200px-使用background-size:400px 200px缩放设置或者利用background-size:100% 100%缩放设置

1 <div class="bsize1 bsize3"></div>

1 .bsize3 {
2          background-size: 400px;
3         /*background-size:100% 100%;*/
4  }    

美高梅开户网址 16

1、background-image

css3中background-image可以设置多少个背景图片,用法:background-image:url(),url()。

对于多重背景图要求留意以下几点:

恒定宽度400px和冲天200px-使用background-size:400px 200px缩放设置或者选择background-size:100% 100%缩放设置

1 <div class="bsize1 bsize3"></div>

1 .bsize3 {
2          background-size: 400px;
3         /*background-size:100% 100%;*/
4  }    

美高梅开户网址 17

向来宽度400px和冲天200px-使用background-size:100%的缩放设置

1 <div class="bsize1 bsize5"></div>

1 .bsize5 {
2          background-size: 100%;
3   }

美高梅开户网址 18

 

a、背景图顺序

背景图以层的样式显得,多少个背景图从上往下遍布,第二个背景图在最顶层,所以添加三个背景图须要小心顺序以及图片透明度。

举例:

四个div的背景图一样,顺序相反。

美高梅开户网址 19<style>
div{ width: 200px; height: 200px; border: 5px dotted pink;
background-repeat: no-repeat; display: inline-block; } .bg{
background-image: url(img/bg_flower.gif),url(img/bg_flower_2.gif); }
.bg2{ background-image:
url(img/bg_flower_2.gif),url(img/bg_flower.gif); } </style>
</head> <body>
<p>两张背景图:尺寸一样,第一张透明,第二张不透明<p> <img
src=”img/bg_flower.gif”/><img src=”img/bg_flower_2.gif” />
<div class=”bg”> </div> <div class=”bg2″> </div>
</body> View Code

 美高梅开户网址 20

解析:因为背景图以层的方式显得,第二个增加的在最上层。所以上左图中第四个背景图在上且透明就可以爆发很美丽的重叠效果,第三个因为不透明的背景图在上就覆盖了第三个图片,所以看不到上边的图样。

那点和box-shadow很相像。一个box有多重阴影时,七个黑影从上往下遍布,首个黑影在最顶层。了解越多可参照《css3
box-shadow》

恒定宽度400px和冲天200px-使用background-size:100%的缩放设置

1 <div class="bsize1 bsize5"></div>

1 .bsize5 {
2          background-size: 100%;
3   }

美高梅开户网址 21

 

应用性质cover来设置背景图片

1 <div class="bsize1 cover"></div>

.cover {
        background-size:cover;
 }

美高梅开户网址 22

b、语法缩写

用’‘隔开每组background的缩写值;若是有 size 值,须求紧跟 position
并且用 “/” 隔开;

background : [background-color] | [background-image] | [background-position][/background-size] | [background-repeat] | [background-attachment] | [background-clip] | [background-origin],...

Note:缩写时必须把background-color设置在最底部,才能奏效。若是将background-color添加到任何层,语法错误整个规则都被忽视,不会突显。

举例:

美高梅开户网址 23<style>
div{ width: 200px; height: 200px; border: 5px dotted pink; display:
inline-block; } .bg3{ background: url(img/bg_flower.gif)
no-repeat,url(img/bg_flower_2.gif) no-repeat blue; } .bg4{ background:
url(img/bg_flower.gif) no-repeat yellow,url(img/bg_flower_2.gif)
no-repeat blue; } </style> </head> <body>
<p>两张背景图:尺寸一样,第一张透明,第二张不透明<p> <img
src=”img/bg_flower.gif”/><img src=”img/bg_flower_2.gif” />
<div class=”bg3″></div> <div class=”bg42″></div>
</body> View Code

美高梅开户网址 24

分析:上图左一,background-color写在最尾部,生效。左二中,给第一层加了一个background-color:yellow;整个规则不行。

使用性质cover来设置背景图片

1 <div class="bsize1 cover"></div>

.cover {
        background-size:cover;
 }

美高梅开户网址 25

利用性质contain来安装背景图片

<div class="bsize1 contain"></div>

.contain {
        background-size:contain;
  }

美高梅开户网址 26

c、拆分写法

要么将缩写拆分开写:假使有七个背景图片,而其他质量唯有一个(例如
background-repeat
只有一个),注脚所有背景图片应用该属性值;同样background-color只可以设置一个。

background-image:url1,url2,...,urlN;
background-repeat : repeat1,repeat2,...,repeatN;
backround-position : position1,position2,...,positionN;
background-size : size1,size2,...,sizeN;
background-attachment : attachment1,attachment2,...,attachmentN;
background-clip : clip1,clip2,...,clipN;
background-origin : origin1,origin2,...,originN;
background-color : color;

行使性能contain来安装背景图片

<div class="bsize1 contain"></div>

.contain {
        background-size:contain;
  }

美高梅开户网址 27

给图片设置width属性100%;中度自适应

不行使背景图片等情事下,给图片设置属性 width =
100%,它的万丈会自适应的。如下HTML代码:

<div class="bsize-padding"><img src="3.jpg" width="100%"/></div>

美高梅开户网址 28

d、背景图和潜移默化

渐变用法是这么:background-image:linear-gradient(…);可知渐变是背景图的一种特例,即用代码生成了一张背景图。精晓更加多渐变可参考《css3
Gradient背景》

美高梅开户网址,既是渐变也是背景图,在多重背景的时候自然可以用了。

.bg5{
  background: url(img/bg_flower.gif) no-repeat,linear-gradient(to right,red ,green,blue) no-repeat;
}
<div class="bg5"></div>

美高梅开户网址 29

总体来说,css3中新增的文山会海背景图,拔取好的图纸,使用合适可以克服,达到意料之外的效益。

给图片设置width属性100%;中度自适应

不选取背景图片等景况下,给图片设置属性 width =
100%,它的冲天会自适应的。如下HTML代码:

<div class="bsize-padding"><img src="3.jpg" width="100%"/></div>

美高梅开户网址 30

动用另一种艺术来缓解图片自适应的题材--图片自适应难题

图形宽度设置100%,页面加载时会存在中度塌陷的难点,可以行使padding-top来设置百分比率来贯彻自适应
padding-top = (图片的冲天/图片的拉长率)*100;

<p>可以使用padding-top来设置百分比值来实现自适应 padding-top = (图片的高度/图片的宽度)*100</p>
<div class="cover-paddingTop">
      <img src="5.jpg"/>
</div>

.cover-paddingTop {
       position: relative;
       padding-top: 50%; 
       overflow: hidden;
  }
 .cover-paddingTop img{
      width:100%;
      position: absolute;
      top:0;
  }

美高梅开户网址 31

2、background-repeat

对应背景图的平铺,必须表明某些:默许处境,背景图在x轴和y轴平铺,即使初阶于padding-box左上角,不过其各类方向朝外平铺,延伸到border区域。这一点很首要,在底下background-origin时也要说到。

应用另一种艺术来化解图片自适应的难题--图片自适应问题

图表宽度设置100%,页面加载时会存在中度塌陷的标题,可以使用padding-top来设置百分比率来贯彻自适应
padding-top = (图片的高度/图片的增加率)*100;

<p>可以使用padding-top来设置百分比值来实现自适应 padding-top = (图片的高度/图片的宽度)*100</p>
<div class="cover-paddingTop">
      <img src="5.jpg"/>
</div>

.cover-paddingTop {
       position: relative;
       padding-top: 50%; 
       overflow: hidden;
  }
 .cover-paddingTop img{
      width:100%;
      position: absolute;
      top:0;
  }

美高梅开户网址 32

运用padding-top:(percentage)完成响应式背景图片

贯彻的基本原理:将动用到保险元素的宽高比的技巧,为因素添加垂直方向的padding-top的值,使用比例的款式,那些值是相对于元素的宽而定的,比如我下面的一张图纸的宽度是1024px,高度为316px;那么现在的

padding-top = (高度 / 宽度 )*100% = (316 / 1024)* 100% = 
30.85%;

不过单独对图片中度和幅度缩放的放还不够,我门还非得添加
background-size:cover,
使那个特性让背景铺满元素的,不过IE8及以下不援救该属性,由此为了包容IE上边的浏览器,我门还需求再加一个品质background-position: center ; 同时自身门也要保管
图片的大幅度最大等于父容器的增幅;故而下边的HTML代码如下:

<div class="column">
    <div class="figure"></div>
</div>

.column{
        max-width: 1024px;
 }
 .figure {
         padding-top:30.85%; /* 316 / 1024 */
         background: url("6.jpg") no-repeat;
          background-size:cover;
          background-position:center;
    }

美高梅开户网址 33

 

a、css3增添到2个属性值

css3中,可以选用四个repeat代替一个值。第三个为x轴,第一个为y轴。比如background-repeat:
repeat no-repeat;和background-repeat: repeat-x;等价。

css2中背景图的再一次形式唯有repeat,repeat效果似乎贴瓷砖一样,即使无法整数个整好放置,超出部分就被裁剪掉了。css3新增了space和round属性值,在repeat基础上对重新的长河一气呵成更好的把控,尽善尽美。

采取padding-top:(percentage)已毕响应式背景图片

心想事成的基本原理:将选用到有限支撑元素的宽高比的技能,为要素添加垂直方向的padding-top的值,使用比例的样式,那些值是相持于元素的宽而定的,比如自己上边的一张图片的涨幅是1024px,中度为316px;那么现在的

padding-top = (高度 / 宽度 )*100% = (316 / 1024)* 100% = 
30.85%;

唯独单纯对图纸中度和增幅缩放的放还不够,我门还必须添加
background-size:cover,
使那个特性让背景铺满元素的,不过IE8及以下不支持该属性,由此为了包容IE上边的浏览器,我门还需求再加一个性质
background-position: center ; 同时自身门也要有限支撑图片的小幅最大等于父容器的小幅;故而上面的HTML代码如下:

<div class="column">
    <div class="figure"></div>
</div>

.column{
        max-width: 1024px;
 }
 .figure {
         padding-top:30.85%; /* 316 / 1024 */
         background: url("6.jpg") no-repeat;
          background-size:cover;
          background-position:center;
    }

美高梅开户网址 34

 

background-size的主干品质 background-size:
可以设定背景图像的尺码,该属性是css3中的,在移动…

b、css3新增属性值space

将背景图在档次和垂直方向平铺且不裁剪。两端对齐,中间填补空白,背景图大小不变。

c、css3新增属性值round

将背景图在档次和垂直方向平铺且不裁剪。但是背景图片可能被拉伸或裁减。

repeat,space和round相比举例:

理所当然想找个合适的小点的图形,没找到,那就拿作品前面资源链接里一个背景图来比喻好了。

原小编的例子在那边。

美高梅开户网址 35

就是那只羊,原图新闻:

美高梅开户网址 36

好大一只羊,我在做demo时设置了background-size:100px
100px,那些特性前面会介绍。

代码:

<style>
div{
  width: 240px;
  height: 240px;
  border: 1px solid pink;
  display: inline-block;
  background-image: url(img/sheep.png);
  background-size: 100px 100px;
  background-color: green;
  color: red;
}
.repeat{
  background-repeat: repeat;
}
.space{
  background-repeat: space;
}
.round{
  background-repeat: round;
}
.round1{
  background-repeat: round;
  width:250px;
}
</style>
<body>
  <div class="repeat">repeat</div>
  <div class="space">space</div>
  <div class="round">round四舍</div>
  <div class="round1">round五入</div>
</body>

效果:

美高梅开户网址 37

分析:

先是,我设定div的尺寸为240px*24px,img的尺寸为100px*100px。

repeat的意况,背景图从左上角初阶沿着x轴和y轴平铺,背景图大小不变,多余被裁剪,如上图左1。

space的状态,240/100=2.4,放不下3个图,因为space不裁剪,所以向下取整为2,所以x和y轴都有2张背景图,且两端对齐,其余空间空白,如上图左2。

round的图景,round这么些词很风趣,它有四舍五入的趣味。round(240/100)=round(2.4)=2,所以就容纳2张图纸,图片尺寸放大,如上图右2。

要是设定div宽度为250,round(250/100)=round(2.5)=3,所以就容纳3张图片,图片被压缩,如上图右1。

3、background-position

css2中背景只可以从左上角永恒,css3的background-position扩充到三个属性值,可以对多少个角都进展定点,而且可以取负值。

background-position取值的第一字有:top left center right bottom

绳趋尺步取值个数举例来说一下:

a、一个参数

background-position: top;仅给定一个值,那么第四个值将是”center”。

专注一个标题:给一个值,并不一定是设置background-position-x,要基于参数定。left
center right自然是安装x轴,top center right是对应y轴。

b、多个参数

background-position:x% y%|x pos y pos|center center。

首先个设置x轴偏移,首个设置y轴偏移,没什么好说的。

c、多少个参数

Note:设置3个或4个参数值时,偏移量前面必须有关键字。就是说形如:”10px
bottom 20px” ,是漏洞百出的,因为10px前边没有根本字。

MDN上background-position: 0px 0px, center;那样的写法明显是不对的。

background-position: right 10px top;设置,水平靠右10px,垂直top。

d、多个参数

background-position:right 10px bottom
10px;设置靠右下角水平垂直10px定位。

二、css3中新增属性介绍

css3中background新增了3个属性:background-origin,background-clip和background-size。

1、background-origin

background-origin用来指定背景图片定位在哪个盒子中。

个人观点:background-origin是background-position的特例。都是意味着背景图放哪,background-origin特殊点,决定背景图定位在哪个盒子中,相当于连忙稳定,你可以先经过background-origin定位到盒子,再通过background-position举行微调。

语法:

background-origin : border-box | padding-box | content-box;

默认值:padding-box;

安装背景图片原始起源地方,没什么好说的,只是有几点必要小心:

a、repeat和origin关系

倘若背景不是no-repeat,这些特性无效,它会从边框初叶突显。那句话是慕课网统计的,我得吐槽一下,背景repeat这么些特性是照旧一蹴而就的。请看下边例子。

<style type="text/css">
div{
    color: white;
    width: 100px;
    height: 100px;
    border: 20px  dotted pink;
    padding:50px;
    background-color: yellow;
    background-image: url(img/wl.jpg) ;
    display: inline-block;
    vertical-align: top;
}
.origin-content{
    background-origin: content-box;
}
.nopeat{
    background-repeat: no-repeat;
}
</style>
<body>
<div></div>
<div class="origin-content nopeat">origin-content nopeat</div>
<div class="origin-content">origin-content</div>
</body>

 美高梅开户网址 38

剖析:可知设置repeat时,先通过origin确定图片地方,然后向各类方向朝外平铺,延伸到border区域。在上头background-repeat时就说了:对于背景图的平铺,默许意况,背景图在x轴和y轴平铺,即使起首于padding-box左上角,但是其各类方向朝外平铺,延伸到border区域。现在origin只是改变了开首地方,

b、fixed和origin关系

假定background-attachment属性设置为”fixed”,background-origin将不起作用。

以此很好掌握,因为fixed是对峙于视口定位的,一个网页只有一个视口,若是不领悟请看《background-attachment属性》

2、background-clip

背景区域中背景图片裁剪的职分。

语法:

background-clip : border-box | padding-box | content-box | no-clip;

默认值:border-box。

假诺理解相比较空虚,就关注背景颜色,假设background-clip为content,背景颜色就不会填充padding和border,因为被裁剪掉了。

美高梅开户网址 39<style
type=”text/css”> p { border: 10px navy; border-style: dotted double;
margin: 1em; padding: 1em; background: #F8D575; } .bb{ background-clip:
border-box; } .pb{ background-clip: padding-box; } .cb{ background-clip:
content-box; } </style> <body> <p
class=”bb”>内容background-clip: border-box;</p> <p
class=”pb”>内容background-clip: padding-box;</p> <p
class=”cb”>内容background-clip: content-box;</p> </body>
View Code

美高梅开户网址 40

3、background-size

css3新增了background-size允许背景图被拉伸或者压扁。在响应式设计里很有用。

语法:

background-size: auto | <长度值> | <百分比> | cover | contain

参数:

auto:默许值,不改动背景图片的本来中度和幅度。

<长度值>:成对出现如200px
50px,将背景图片宽高依次安装为眼前四个值;当设置一个值时,将其看作图片宽度值,中度被安装为”auto”,且中度等比缩放

<百分比>:0%~100%时期的任意值,将背景图片宽高依次安装为所在元素宽高【并不是图片默许的宽高】乘之前面百分比得出的数值,一个值时,中度等比缩放。

cover:覆盖,将背景图片等比缩放以填满所有容器。类似桌面背景中的平铺。就是把图纸按百分比增加至丰富大,以使背景铺满盒子,借使图片和容器的长宽比不一致的话,背景图像的某些部分或者不能出示出来。

contain:容纳,即将背景图片等比缩放至容器的宽或高被填充满。有可能把图像放大后,如故铺不满盒子。

网上广大cover和contain的事例,不过讲的很不明白。上边我举个例子说贝拉米(Meadjohnson)下。

对比cover和contain举例:

美高梅开户网址 41<style>
div{ width: 150px; height: 60px; border: 1px solid pink; display:
inline-block; background-image: url(img/bg.png); background-color:
green; vertical-align: top; background-repeat: no-repeat; } .cover{
background-size: cover; } .contain{ background-size: contain; }
</style> <body> <img
src=”img/bg.png”>原始图片尺寸:100px*50px
<br/><br/><div
class=”cover”></div>div尺寸:150px*60px; <div
style=”width:150px;height:75px;background-size:cover;”></div>cover对应图片尺寸:150px*75px;
<br/><br/><div
class=”contain”></div>div尺寸:150px*60px; <div
style=”width:120px;height:60px;background-size:contain;”></div>contain对应图片尺寸:120px*60px;
<h3>背景图片大小计算办法:</h3>
<h4>即cover和contain等比缩放比例的测算:</h4>
<p>150/100=1.5;60/50=1.2</p>
<p>cover取大,放大1.5倍。width:150px;height:75px;</p>
<p>contain取小,放大1.2倍。width:120px;height:60px;</p>
</body> View Code

美高梅开户网址 42

从而自己个人认为在运用cover和contain时把握住本质就是确定缩放比例,而并非去回忆那一个复杂的条条框框。

三、资源链接

background-clip

background-size

new repeating background image options in css3

how to resize background images with css3

w3c background shorthand

 

background,css3
background是一个很要紧的css属性,在css3中新增了过多内容。一方面是固有属性新增了属性值,另一方面就是新增了3个属性…

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图