当前位置: 网站建设 > 网页设计 > 建站经验 >

CSS3基础教程:详解background-size

时间:2013-03-02 03:42来源:未知 作者:admin 点击:

标签:CSS3基础教程:详解background-size 详解(47)CSS3(90)教程(56)基础(18)
Tag:CSS3基础教程 background-size CSS3基本教程 background-size div{ background-image:url(test, CSS3基础教程:box-shadow属性 .png); background-repeat:no-repeat; background-size:contain; } 一起来意识认识background-size吧。 2.设置背景图大小与
CSS3基础教程:详解background-size》文章地址:http://www.tfxk.com/wangyesheji/jianzhanjingyan/03023321R013.htm
Tag:CSS3基础教程   background-size   CSS3基本教程   background-size  

div{
   background-image:url(test,CSS3基础教程:box-shadow属性.png);
 ,css3圆角IE的兼容方法;  background-repeat:no-repeat;
   background-size:contain;
}

  一起来意识认识background-size吧。

 

2.设置背景图大小与平铺

  background-size的特定值:

 

  现在background-size让你既可以直接缩放背景图来填充斥这个区域,CSS3和jQuery动态时钟制作过程,也可以让你先给背景图设置大小,而后以设置好的尺寸去平铺满这个区域。

contain值:

  上例,背景图将缩放到宽度或高度的任意一边与div区域适应。查看详细DEMO: background-size:contain。

div{
   background-image:url(test,css3制作网页实例 点击切换不同的CSS列表.png);
   background-repeat:no-repeat;
   background-size:100px auto;
}

CSS3基础教程,CSS3入门教程:target伪类简介,本节详解应用background-size可以把持背景图的尺寸。 

   background-size简略的利用示例:

  background-size须要1个或2个值,这些值既可以是像素px,也可以是百分比%或auto,还可以是特定值cover,CSS3入门教程(9):RGBA声明, contain。

  上例,背景图片将笼罩全部div区域。查看详细DEMO: background-size:cover。

1.背景图自适应容器大小

  background-size的值定义:

div{
   background-image:url(test.png);
   background-repeat:no-repeat;
 ,CSS3入门教程(8):关于透明度;  background-size:cover;
}

  background-size能够设置2个值,CSS3入门教程(7):嵌入字体,1个为必填,1个为可选。
  其中第1个值用于指定背景图的width,第2个值用于指定背景图的height,假如只给background-size设置1个值,则第2个值默以为auto(cover跟contain特定值除外)。

--> [网站建设之]CSS3基础教程:详解background-size

cover: 坚持图像自身的宽高比例,将图片缩放到正好完整覆盖定义背景的区域; contain: 保持图像本身的宽高比例,将图片缩放到宽度或高度正好适应定义背景的区域;

cover值:

  等价于:

  background-size的值类型:

background-size是CSS3供给的一个新特征,它可以让你为所欲为的节制背景图的尺寸大小。先扼要的看看background-size的用法。咱们晓得在CSS2中,背景图的大小在款式中是不可控的,比方要想使得背景图填布满某个区域,你要么从新做张大点的图,CSS3入门教程(6):多列 多卷,要么就只能让它以平铺的方法来填充,CSS3入门教程(5):背景图片(背景大小和多背景图)

div{
   background-image:url(test.png);
   background-repeat:no-repeat;
   background-size:100px;
}

 

  查看具体DEMO: background-size的值定义。当你使用firebug抓取到那个实例节点时,你会发明第二个值被主动加上了并且值为auto。当然,你也可以手动将第2个值设置为auto,然后与该DEMO的实例对照,它们的后果将是雷同的。


(责任编辑:网站建设)
CSS3基础教程:详解background-size相关文章
上一篇:CSS3基础教程:box-shadow属性 下一篇:css3基础教程:详解border color
回到顶部