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. java IO流 之 其他流

    一.内存操作流(ByteArrayInputStream.ByteArrayOutputStream) (一).   public class ByteArrayInputStream extends ...

  2. 导入一些常用命令比如(rz),关闭防火墙外面可以访问

     yum -y install lrzsz-----------导入常用命令 我在虚拟机上面启动了一个项目 这个原因是防火墙造成的,关闭防火墙  iptables -L 查看下 service ipt ...

  3. Dynatree使用

    最近用到了Dynatree的树形结构,记录一下它的用法. 需求: 1.jquery.js 2.jquery-ui.custom.js 3.jquery.cookie.js 下载dynatree,放到资 ...

  4. Uiautomator 2.0之Until类学习小记

    1. 状态条件-Uiobject2Condtion 1.1 一个UiObject2Condition代表UiObject2满足某个条件的特定状态,主要用于获取到组件释放处于某种状态. 1.2 简单示例 ...

  5. 回发或回调参数无效。在配置中使用 pages enableEventValidation=true 或在页面中使用 %@ Page EnableEventValidation=true % 启用了事件验证

    WebForm中回发或回调参数无效问题的解决 解决 .NET中回发或回调参数无效问题的解 该错误的详细提示信息为: 回发或回调参数无效.在配置中使用 <pages enableEventVali ...

  6. Windows Phone 8弹窗

    新建一个UserControl,添加到相应位置 <Grid x:Name="LayoutRoot" Background="{StaticResource Phon ...

  7. Hibernate4.0之HibernateSessionFactory源码详解

    import org.hibernate.HibernateException; import org.hibernate.Session; import org.hibernate.cfg.Conf ...

  8. tn文本分析语言(四) 实现自然语言计算器

    tn是desert和tan共同开发的一种用于匹配,转写和抽取文本的语言.解释器使用Python实现,代码不超过1000行. github地址:https://github.com/ferventdes ...

  9. “英雄之旅”见闻和小结----angular2系列(三)

    前言: 本系列在前面两篇文章,介绍了Zone.js和angular2的基础概念.而后对于ng2的学习,还是由官方的 Tour of Heroes 开始. 以下内容经过提炼和个人理解,当然也会有不正确的 ...

  10. Cesium应用篇:1快速搭建

    范例中所有范例可以在Github中搜索:ExamplesforCesium Cesium ['siːzɪəm]是一款开源的JavaScript开源库,开发者通过Cesium,实现无插件的创建三维球和二 ...