bachground-size属性就是定义背景图片的大小，其值有：auto , 像素值 , 百分比 , cover  ,  contain 。

background-size: auto，默认值，以图片自身大小填充元素，根据元素大小来调节自身比例，不会让图片变形。

<!DOCTYPE html>

<html>

<head>

    <meta  charset="utf-8">

    <title>background-size属性</title>

    <style type="text/css">

      div{

          width:300px;

          height:150px;

          border:1px solid black;

          background:url("photo.jpg") no-repeat;

      }

    </style>

</head>

<body>

    <div></div>

</body>

</html>

背景图片本身大小—width:200px ，height:133px ，上述代码的效果图如下：

 像素值，比如 30px  50px，分别表示width  height

<!DOCTYPE html>

<html>

<head>

    <meta  charset="utf-8">

    <title>background-size属性</title>

    <style type="text/css">

      div{

          width:300px;

          height:150px;

          border:1px solid black;

          background:url("photo.jpg") no-repeat;

          background-size:250px 100px;

      }

    </style>

</head>

<body>

    <div></div>

</body>

</html>

将图片的width设置为250px，height设置为100px，效果图为：

百分比，比如  30%  50%，分别表示width   height ，该百分比相对于本元素

<!DOCTYPE html>

<html>

<head>

    <meta  charset="utf-8">

    <title>background-size属性</title>

    <style type="text/css">

      div{

          width:300px;

          height:150px;

          border:1px solid black;

          background:url("photo.jpg") no-repeat;

          background-size:80% 50%;

      }

    </style>

</head>

<body>

    <div></div>

</body>

</html>

将图片的宽设置为相对于div的宽的80%，长相对于div的长的50%，效果如下：

cover，将图片等比例缩放，图片刚好全部占满本元素为止，这可能会到导致宽或高其中之一会溢出而被舍弃

<!DOCTYPE html>

<html>

<head>

    <meta  charset="utf-8">

    <title>background-size属性</title>

    <style type="text/css">

      div{

          width:300px;

          height:150px;

          border:1px solid black;

          background:url("photo.jpg") no-repeat;

          background-size:cover;

      }

    </style>

</head>

<body>

    <div></div>

</body>

</html>

图片将铺满整个元素，不过可能会因为比例不对而到时宽或高其中之一溢出而被舍弃，效果图如下：

对比原图，该图的高溢出一部分被舍弃。

contain，将图片等比例缩放， 图片的宽或长刚好100%铺满本元素的长或宽即可，这可能会导致宽或长不足100%

<!DOCTYPE html>

<html>

<head>

    <meta  charset="utf-8">

    <title>background-size属性</title>

    <style type="text/css">

      div{

          width:300px;

          height:150px;

          border:1px solid black;

          background:url("photo.jpg") no-repeat;

          background-size:contain;

      }

    </style>

</head>

<body>

    <div></div>

</body>

</html>

图片的宽或高铺满div的宽或高，效果如下图：

当图片的高铺满div的高时，图片的宽还没铺满div的宽。

CSS3关于background-size属性的更多相关文章

  1. css3的Background新属性

    前言 CSS3中出现了几种关于背景图片的新属性:background-origin.background-clip.background-position等.之前大致了解了下,但是background ...

  2. CSS3中background属性的调整

    CSS3对于background做了一些修改,最明显的一个就是采用设置多背景,不但添加了4个新属性,并且还对目前的属性进行了调整增强. 1.多个背景图片 在css3里面,你可以再一个标签元素里应用多个 ...

  3. CSS背景和CSS3背景background属性

    css背景属性用于定义HTML元素的背景 背景属性既可以为单个的单元设置背景,也可以为整个页面设置背景,可以对上述二者的任意组合设置背景,段落.文字.不同状态的链接.图像.内容区域修改其背景样式.设置 ...

  4. background复合属性详解（上）：background-image

    background复合属性是个很复杂的属性,花样非常多,比较神奇的是css3 中支持多图片背景了,这篇文章先讲讲background-image属性,其他背景属性会在后续的文章综合总结. 一.最基本 ...

  5. CSS3的新增边框属性

    一.CSS3 新增的边框属性 属性 版本 简介 border-image CSS3 设置或检索对象的边框使用图像来填充 border-image-source CSS3 设置或检索对象的边框是否用图像 ...

  6. CSS3：布局display属性的flex（弹性布局）

    CSS3:布局display属性的flex(弹性布局) 一.简介 Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性.设为Flex布局以后, ...

  7. css3 背景background

    Css3背景<background> Css3包含多个新的背景属性,它们提供了对背景更强大的控制.可以自定义背景图的大小,可以规定背景图片的定位区域,css3还允许我们为元素使用多个背景图 ...

  8. css中background背景属性概

    css中background背景属性概 background:url(背景图片路径)  no-repeat;/*不重复默认在左上方*/background:url(背景图片路径)  no-repeat ...

  9. CSS3：不可思议的border属性&Web字体图标Font Awesome

     CSS3:不可思议的border属性 转载至——译文:不可思议的CSS border属性 原文:Magic of CSS border property Web字体图标Font Awesome 转载 ...

  10. CSS3学习之 animation 属性

    发现animation这个新属性很有趣,在此学习,并整理下!  浏览器支持: Internet Explorer 10.Firefox 以及 Opera 支持 animation 属性: Safari ...

随机推荐

  1. Windows下安装python2和python3双版本

    现在大家常用的桌面操作系统有:Windows.Mac OS.ubuntu,其中Mac OS 和 ubuntu上都会自带python.这里我们只介绍下Windows(我用的Win10)环境下的pytho ...

  2. Execute SQL Task 参数和变量的映射

    Execute SQL Task能够执行带参数的SQL查询语句或存储过程(SP),通过SSIS的变量(Variable)对参数赋值.对于不同的Connection Manager,在Task中需要使用 ...

  3. 用jquery.pager.js实现分页

    1.html <link href="/stylesheets/Pager.css" rel="stylesheet" type="text/c ...

  4. Android获取短信验证码

    Android开发中关于短息验证码的设计层出不穷,越来越多的应用为了更好的提高软件的安全性,开始使用通过服务器向用户发送验证码的方式,来保护用户个人信息的安全性.无论是用户注册时的信息验证还是当用户发 ...

  5. MySQL学习笔记九：存储过程，存储函数，触发器

    存储过程 1.存储过程由一组特定功能的SQL语句组成,对于大型应用程序优势较大,相对不使用存储过程,具有以下优点: a.性能提高,因为存储过程是预编译的,只需编译一次,以后调用就不须再编译 b.重用性 ...

  6. scikit-learn 朴素贝叶斯类库使用小结

    之前在朴素贝叶斯算法原理小结这篇文章中,对朴素贝叶斯分类算法的原理做了一个总结.这里我们就从实战的角度来看朴素贝叶斯类库.重点讲述scikit-learn 朴素贝叶斯类库的使用要点和参数选择. 1. ...

  7. IOS开发之自动布局显示网络请求内容

    在上一篇博客中详细的介绍了IOS开发中的相对布局和绝对布局,随着手机屏幕尺寸的改变,在App开发中为了适应不同尺寸的手机屏幕,用自动布局来完成我们想要实现的功能和效果显得尤为重要.本人更喜欢使用相对布 ...

  8. Java中的网络编程

    ​ Java中的网路编程主要是Java的Socket编程,属于JavaEE中的高级的部分,以下内容是对java网路编程的一个小结,代码都是经过编译调试的 C/S程序应用:客户/服务器模式,如QQ客户端 ...

  9. 坑爹的Maven

    之前没用过Maven,最近在研究Curator的时候,导入别人的工程,但是没有相应的包,需使用Maven解决依赖.于是各种折腾,最后虽然解决了,但中间的坑还不少.尽管网上也有相应的安装教程,但很多都是 ...

  10. tomcat:there is no resources that can be added or removed from server

    原因: 1.不是web project 解决方式:project-->property--project facet 新建或者修改 2. 版本不兼容 升级tomcat版本