CSS3之背景尺寸Background-size使用介绍

  发布时间:2013-10-14 15:37:28   作者:佚名   我要评论
CSS3背景尺寸Background-size,这个属性是改变背景尺寸的通过各种不同是属性值改变背景尺寸呈现的大小,下面为大家详细介绍下其语法、浏览器兼容及使用示例,感兴趣的朋友不要错过

CSS3之背景尺寸Background-size是CSS3中新加的一个有关背景的属性,这个属性是改变背景尺寸的通过各种不同是属性值改变背景尺寸呈现的大小。下面就想来看下有关CSS3 之背景尺寸Background-size的介绍吧。

一、Background-size的语法
1、Background-size的语法

复制代码
代码如下:

background-size: auto(原始图片大小) || number(数值) || percentage(百分比) || cover(放大铺满) || contain(缩小铺满)

2、Background-size的属性值
1、auto:此值为默认值,保持背景图片的原始高度和宽度;
2、number:此值设置具体的值,可以改变背景图片的大小;
3、percentage:此值为百分值,可以是0%〜100%之间任何值,但此值只能应用在块元素上,所设置百分值将使用背景图片大小根据所在元素的宽度的百分比来计算。
4、cover:此值是将图片放大,以适合铺满整个容器,这个主要运用在,当图片小于容器时,又无法使用background-repeat来实现时,我们就可以采用cover;将背景图片放大到适合容器的大小,但这种方法会使用背景图片失真;
5、contain:此值刚好与cover相反,其主要是将背景图片缩小,以适合铺满整个容器,这个主要运用在,当背景图片大于元素容器时,而又需要将背景图片全部显示出来,此时我们就可以使用contain将图片缩小到适合容器大小为止,这种方法同样会使用图片失真。
当background-size取值为number和percentage时可以设置两个值,也可以设置一个值,当只取一个值时,第二个值相当于auto,但这里的auto并不会使背景图片的高度保持自己原始高度,而会与第一个值相同。

二、Background-size的兼容
1、Background-size的兼容情况

2、Background-size的兼容写法

复制代码
代码如下:

/*Mozilla*/
-moz-background-size: auto(原始图片大小) || number(数值) || percentage(百分比) || cover(放大铺满) || contain(缩小铺满)
/*Webkit*/
-webkit-background-size: auto(原始图片大小) || number(数值) || percentage(百分比) || cover(放大铺满) || contain(缩小铺满)
/*Oprea*/
-o-background-size: auto(原始图片大小) || number(数值) || percentage(百分比) || cover(放大铺满) || contain(缩小铺满)
/*W3c标准*/
background-size: auto(原始图片大小) || number(数值) || percentage(百分比) || cover(放大铺满) || contain(缩小铺满)

三、Background-size的例子(在谷歌浏览器下看哟)
1、图片放大缩小
CSS代码:

复制代码
代码如下:

.box{width:300px;height:300px;background:url("http://www.leemagnum.com/img/sizeA.png") no-repeat center; border:1px solid #000;
-webkit-transition:1s all linear;
background-size:20px 20px;
}
.box:hover{
background-size:200px 200px;
}

HTML代码:

复制代码
代码如下:

<div class="box"></div>

预览效果:
(1)初始状态:

(2)hover的状态:

2、图片contain和cover的效果
CSS代码:

复制代码
代码如下:

.box{width:300px;height:300px;background:url("http://www.leemagnum.com/img/sizeA.png") no-repeat center; border:1px solid #000;
-webkit-transition:1s all linear;
background-size:cover;
}
.box:hover{
background-size:contain;
}

HTML代码:

复制代码
代码如下:

<div class="box"></div>

预览效果:
(1)初始状态:

(2)hover的状态

CSS3之背景尺寸Background-size就为大家介绍到这里了,很简单的小属性,这只是CSS3新加的背景属性之一,更多有关CSS3的小属性尽在梦龙小站,跟多有关CSS3的其他内容欢迎大家关注梦龙小站有关CSS3的更新。

相关文章

  • CSS3实现多背景模拟动态边框的效果

    前几天在工作的时候遇到一个问题,项目需要实现一个效果,当鼠标移入一个元素的时候,元素出现一个动态的边框,通过网上查找资料看到有人推荐可以使用Css3来实现,后来试了
    2016-11-08
  • CSS3点击按钮实现背景渐变动画效果

    这篇文章给大家介绍的是,利用CSS3实现当点击按钮的时候,按钮的背景是渐变动画的效果,实现后的效果非常好,开发的时候利用这种效果的按钮会给用户一种非常酷炫的感受,感
    2016-10-19
  • CSS3条纹背景制作的实战攻略

    这篇文章主要介绍了CSS3条纹背景制作的实战攻略,根据Forefox浏览器和webkit内核的浏览器两种情况来分别讲解,需要的朋友可以参考下
    2016-05-31
  • 使用CSS3实现多列布局与多背景的技巧

    这篇文章主要介绍了使用CSS3实现多列布局与多背景的技巧,包括多列栏目的高度平衡和多间隙等一些细节方面的调整方法讲解,需要的朋友可以参考下
    2016-02-29
  • 用CSS3实现背景渐变的方法

    这篇文章主要介绍了用CSS3实现背景渐变的方法,作者并没有给出效果demo这个比较残念...需要的朋友可以参考下
    2015-07-14
  • css3中背景尺寸background-size详解

    background-size是css3提供的一个新特性,它可以让你随心所欲的控制背景图片的大小。下面我们来一步步看看这个新特性都有什么值得我们惊艳的地方
    2014-09-02
  • 使用CSS3的背景渐变Text Gradient 创建文字颜色渐变

    使用CSS3 的背景渐变 -webkit-gradient ,用一个背景渐变的 DIV 代替图片。下面是实现效果示例,相比以上方案优点是不使用图片,减小请求量和流量
    2014-08-19
  • 多重CSS背景动画实现方法示例

    CSS背景动画很长时间以来都是一个热门话题,很多时候都是因为效果特别绚丽,而且不需要额外的技术。最近有人问我是否可以给页面上一个指定的元素安排多重背景动画,答案是y
    2014-04-04
  • CSS3之多背景background使用示例

    CSS3之多背景background和CSS2的使用方法一样,只不过图片可以从1个图片变成多个图片了,其在CSS3的项目中运用比较广泛,大家有更好的案例要积极分享哟
    2013-10-18
  • css3背景_动力节点Java学院整理

    这篇文章主要介绍了css3背景,CSS3规范中对背景这一部分,新加入了一些令人兴奋的功能,如可以设置多个背景图片、可以指定背景大小、设置背景渐变等功能。
    2017-07-11

最新评论