转自:http://www.html5cn.com.cn/css3/2013-04-21/267.html;

background-size属性和background-origin属性、background-clip属性一 样,也是CSS3对于background新增加的属性。它的作用是指定背景图片的大小,比如:对于一个div块,我们需要为它添加一张图片作为背景,然 而图片大小并非总能尽如人意,但我们又不想使用background-repeat属性让背景平铺,那么这时我们就可以使用background- size属性使图片放大或者是缩小来适应div块,当然这也可能会造成背景图的失真。

下面我们就先从它的语法说起吧:

background-size :[ <length> | <percentage> | auto ]{1,2} | cover | contain ;

这 个属性有2个可选值,第1个值用于指定背景图的宽width,第2个值用于指定背景图的高height,如果只设定1个值,则第2个值默认为自动 auto。这两个值可取数字(单位为px)也可以取百分比,当指定为百分比时,大小会由所在区域的宽度、高度,以及background-origin的 位置决定,当然还可以通过cover和contain来对图片进行伸缩。

cover:用于等比放大背景图

contain:用于等比缩小背景图(背景图需大于块,否则背景图仍会被放大以适应块)

auto:默认值

下面我们就用实例来看一下它们的效果吧

首先看一下初始代码及效果

HTML代码:

1
2
3
<div class="div1">
    BeyondWeb.cn-记录与分享前端开发的点点滴滴
</div>

CSS代码:

1
2
3
4
5
6
7
8
9
.div1{
    width:200px;
    height:100px;
    color:#fff;
    font-size:12px;
    border:10px dotted #333;
    padding:10px;
    background:#666 url(girl.jpg) no-repeat;
}

初始效果图:

1、background-size取固定值

CSS代码:

1
2
3
4
5
6
7
8
.div1{
    ...
    -moz-background-size:200px 100px;
    -webkit-background-size:200px 100px;
    -o-background-size:200px 100px;
    background-size:200px 100px;
    ...
}

效果图:

2、background取百分比

CSS代码:

1
2
3
4
5
6
7
8
.div1{
    ...
    -moz-background-size:90% 60%;
    -webkit-background-size:90% 60%;
    -o-background-size:90% 60%;
    background-size:90% 60%;
    ...
}

效果图:

3、background取cover

CSS代码:

1
2
3
4
5
6
7
8
.div1{
    ...
    -moz-background-size:cover;
    -webkit-background-size:cover;
    -o-background-size:cover;
    background-size:cover;
    ...
}

效果图:

为了填满背景,此时是把原图等比放大了

4、background取contain

CSS代码:

1
2
3
4
5
6
7
8
.div1{
    ...
    -moz-background-size:contain;
    -webkit-background-size:contain;
    -o-background-size:contain;
    background-size:contain;
    ...
}

效果图:

此时图片并没有缩小,反而被放大了,其实这是因为原背景图比div块小的原因,那么如果我们照一张大一点的图片,那么会是什么效果呢?现在拿一张比上面div块大的多的图片试一试,CSS代码是不变的,来看一下效果:

这时,背景图片被等比例缩小了,以适应div块。

5、background取auto

CSS代码:

1
2
3
4
5
6
7
8
.div1{
    ...
    -moz-background-size:auto;
    -webkit-background-size:auto;
    -o-background-size:auto;
    background-size:auto;
    ...
}

效果图:

auto是默认值,这和初始效果是一样的,背景图片不做任何的放大或者是缩小。

好了,background-size属性就说这么多。

CSS3 background-size图片自适应的更多相关文章

  1. 网页特效:用CSS3制作3D图片立方体旋转特效

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  2. Android ImageView图片自适应 (转)

    网络上下载下来的图片自适应:android:adjustViewBounds="true"(其详细解释在下面)<ImageView     android:id=" ...

  3. css3制作六边形图片

    效果图: 实现原理: 这个效果的主要css样式有: 1.>transform: rotate(120deg); 图片旋转 2.>overflow:hidden;  超出隐藏 3.>v ...

  4. Android ImageView图片自适应

    网络上下载下来的图片自适应:android:adjustViewBounds="true"(其详细解释在下面) <ImageView     android:id=" ...

  5. 纯CSS3实现的图片滑块程序 效果非常酷

    原文:纯CSS3实现的图片滑块程序 效果非常酷 之前我们经常会看到很多利用jQuery实现的焦点图插件,种类太多了,今天我想给大家分享一款利用纯CSS3实现的图片滑块应用,完全是利用CSS3的相关特性 ...

  6. 【Python全栈-CSS】CSS实现网页背景图片自适应全屏

    CSS实现网页背景图片自适应全屏 功能:实现能自适应屏幕大小又不会变形的背景大图,而且背景图片不会随着滚动条滚动而滚动. 以下是用CSS实现的方法: <html> <head> ...

  7. CSS——background-size实现图片自适应

    在网页端,我们经常想让图片能够自适应拉伸缩放,使之可以完美的嵌入我们给定的容器里,比如div,button,input,下面我将用代码来说明如何实现这个功能! 一.div背景图自适应 如果知道图片都有 ...

  8. padding-bottom图片自适应

    今天学了慕课网的去哪了视频轮播图的图片自适应是这么做的htm,cssl如下:为什么padding-bottom 取值62.08% 呢,因为图片的高为465px,宽为749px. 465/749 既为6 ...

  9. 基于html5背景图片自适应代码

    基于html5背景图片自适应代码是一款背景不随滚动条滚动,会根据分辨率不同自动匹配对应的背景图片.效果图如下: 在线预览   源码下载 实现的代码. css代码: .jawbone-hero .jaw ...

  10. css3伪放大镜(图片放大动画)效果(鼠标移入圆形区域放大图片)

    源码: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8&q ...

随机推荐

  1. [实变函数]2.3 开集 (open set), 闭集 (closed set), 完备集 (complete set)

    1        $$\beex \bea E\mbox{ 是开集}&\lra E^o=E\\        &\lra \forall\ P_0\in E,\ \exists\ U( ...

  2. Java语法基础动手动脑实践

    输出结果为: 0.05+0.01=0.0600000000000000051.0-0.42=0.58000000000000014.015*100401.49999999999994123.3/100 ...

  3. 股票k线

    与上一篇文章相比k线图主要的难点 1.tooltip的定制化显示: 当手指触摸手机屏幕上下拖动可能会手指的事件陷入图表无法进行上下拖动 tooltip:{followMouseMove} follow ...

  4. strace命令

    简介 strace常用来跟踪进程执行时的系统调用和所接收的信号. 在Linux世界,进程不能直接访问硬件设备,当进程需要访问硬件设备(比如读取磁盘文件,接收网络数据等等)时,必须由用户态模式切换至内核 ...

  5. ORA-30036

    http://blog.sina.com.cn/s/blog_676255e101018d5s.html

  6. Java 线程间通讯(共享变量方式)

    Java线程间通讯,最常用的方式便是共享变量方式,多个线程共享一个静态变量就可以实现在线程间通讯,但是这需要注意的就是线程同步问题. 一.没考虑线程同步: package com.wyf; publi ...

  7. DISTINCT后按照DISTINCT之前的某列进行排序

    SELECT 行业名称 FROM 评分标准 GROUP BY 行业名称 ORDER BY MAX(行业ID) DESC

  8. Mingyang.net:No identifier specified for entity

    org.hibernate.AnnotationException: No identifier specified for entity: net.mingyang.modules.system.C ...

  9. Air Raid(最小路径覆盖)

    Description Consider a town where all the streets are one-way and each street leads from one interse ...

  10. ansible高级用法

    将多个符合正则的文件拷贝到目标机器 - name: Copy copy: src={{ item }} dest=/root/.sshkeys mode=0600 owner=root group=r ...