background-size需要两个值,它的类型可以是像素(px)、百分比(%)或是auto,还可以是cover和contain。第一个值为背景图的width,另外一个值用于指定背景图上的height,如果只设定1个值,则第2个默认为auto,但当值为cover和contain时除外。

cover:保持图像的宽高比例,将图片缩放到正好完全覆盖定义的背景区域,其中有一边和背景相同。

html:

<div class="div" ><h1>雨打浮萍</h1><p>专注于web前端开发</p></div>

css:

.div{
width:160px;
height:120px;
border:1px solid #ccc;
padding:10px;
background-image:url(bg.jpg);
background-size:cover;
}

效果如下:

contain:保持图像的宽高比例,将图片缩放到宽或者高正好适应定义背景的区域,但背景仍在定义的区域之内,被包含。

css:

.div{
width:160px;
height:120px;
border:1px solid #ccc;
padding:10px;
background:url(bg.jpg) no-repeat;
background-size:contain;
font-family:Microsoft Yahei;
}

效果如下:

length

.div{
background-size:150px 80px;
}

显示效果:

这里为背景图片设置宽高,图片会直接被拉伸或缩放,不保持原来的比例。如果只设置一个数值,另外一个值默认为auto,它将按图片原比例来伸缩。

percentage

.div{
background-size:40% 60%;
}

这里需要特别注意一下,图片大小不是按背景图片大小的百分数来计算的,而是装载背景图的元素的百分比来计算。

浏览器的兼容性

支持浏览器:IE(9)、firefox、Chrome、Opera、Safari。

/*Mozilla*/
-moz-background-size:auto||<length>||<percentage>||cover||contain;
/*Webkit*/
-webkit-background-size:auto||<length>||<percentage>||cover||contain;
/*Presto*/
-o-background-size:auto||<length>||<percentage>||cover||contain;
/*W3c*/
background-size:auto||<length>||<percentage>||cover||contain;

注意:虽然我上面写到了各浏览器需要添加自己独特的方式,但并不代表这个样式一定要添加,在我写的事例中并没有为各浏览写自己的样式,仍然执行很好。

  转自http://www.igooda.cn/jsdt/20130827355.html

[转载]css3的一个控制背景的属性,background-size可以缩放大小啦的更多相关文章

  1. UITabBar-UITabBarItem图片的背景颜色属性和文字的颜色大小设置

    UITabBarItem设置的图片选中状态下默认的是蓝色,如何改变它的颜色为图片自带的颜色呢? typedef NS_ENUM(NSInteger, UIImageRenderingMode) { / ...

  2. IT兄弟连 HTML5教程 CSS3揭秘 CSS常见的样式属性和值2

    3  背景属性 大多数HTML元素都允许控制背景,包括背景颜色.背景图像.背景重复.背景附件.背景位置等属性.常见的控制背景属性.值及描述如表2所示. 表2  CSS中常见的控制背景的属性 除了使用表 ...

  3. 利用css3的多背景图属性实现幻灯片切换效果

    css3里关于背景的属性增加了可以添加多背景图的特性,例如: .box{background: url(img/1.png),url(img/2.png),url(img/3.png);} 这段css ...

  4. css3新增属性-background背景

    css3新增属性 边框属性 背景属性 文字属性 颜色属性 背景属性 属性 说明 background-image 添加背景图片 background-size 指定背景图像的大小 background ...

  5. CSS3制作动画的三个属性

    CSS3属性中有关于制作动画的三个属性:Transform,Transition,Animation:我们一起学习完了Transform和Transition,让我们对元素实现了一些基本的动画效果,这 ...

  6. CSS背景属性Background详解

    [转] 本文详解了CSS的背景属性Background,包括CSS3中新增的背景属性.如果你是个CSS初学者,还可以查看之前介绍的CSS浮动属性和CSS透明属性详解. CSS2 中有5个主要的背景(b ...

  7. <转载>css3 概述

    参照 https://www.ibm.com/developerworks/cn/web/1202_zhouxiang_css3/ http://www.cnblogs.com/ghost-xyx/p ...

  8. 【Multiple backgrounds】用CSS3实现网页多重背景

    对于背景属性background-image大家应该已经很熟悉了,在CSS2中与它相关的属性还有background-repeat(设置背景是否重复及重复的方式).background-positio ...

  9. Web前端篇:CSS常用格式化排版、盒模型、浮动、定位、背景边框属性

    目录 Web前端篇:CSS常用格式化排版.盒模型.浮动.定位.背景边框属性 1.常用格式化排版 2.CSS盒模型 3.浮动 4.定位 5.背景属性和边框属性 6.网页中规范和错误问题 7.显示方式 W ...

随机推荐

  1. 20170724 Airflow官网资料学习

    -- 1  Apache Airflow 文档 AirFlow 对编程人员来讲就是一个平台,用于进行日程安排和监控.但是还在卵化期,严格来说,不是一个完整的成品.

  2. Pycharm常用配置

    Pycharm常用配置 pycharm中的设置是可以导入和导出的,file>export settings 可以保存当前pycharm中的设置为jar文件,重装时可以直接import setti ...

  3. Mac本如何卸载MySQL

    Mac本如何卸载MySQL 在Mac上卸载MySQL上一件非常麻烦的事,如果没有卸载干净,就会无法安装新的MySQL 怎样才能完全卸载MySQL呢?(包括所有数据库)    执行以下操作: #打开终端 ...

  4. dxCameraControl控件(拍照)

    拍照演示 主要属性设置 Active:True DeviceIndex:设备号,默认为0 其他方法 procedure Capture; //捕获 procedure Pause; //暂停 proc ...

  5. LigerUi折叠与展开

    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"% ...

  6. HTML中--定义header和footer高度中间自适应

    <html> <head> <meta charset="utf-8" /> <title></title> <s ...

  7. ionic 版本内更新问题汇总

    1.签名不一致导致的更新失败 2.解析软件包出现问题 3.当文件下载完.在android 8.0中不能打开apk包的问题 解决方案:在config.xml中添加: <platform name= ...

  8. box-shadow outline 实现双边框 阴影

    文字阴影 text-shadow box-shadow   格式:text-shadow:x y blur color, … 参数 x        横向偏移 y        纵向偏移 blur  ...

  9. Spark中repartition和partitionBy的区别

    repartition 和 partitionBy 都是对数据进行重新分区,默认都是使用 HashPartitioner,区别在于partitionBy 只能用于 PairRDD,但是当它们同时都用于 ...

  10. Python pickle 模块

    转自:https://www.cnblogs.com/lincappu/p/8296078.html pickle可以存储的数据类型 所有python支持的原生类型:布尔值,整数,浮点数,复数,字符串 ...