CSS3关于background-size属性
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属性的更多相关文章
- css3的Background新属性
前言 CSS3中出现了几种关于背景图片的新属性:background-origin.background-clip.background-position等.之前大致了解了下,但是background ...
- CSS3中background属性的调整
CSS3对于background做了一些修改,最明显的一个就是采用设置多背景,不但添加了4个新属性,并且还对目前的属性进行了调整增强. 1.多个背景图片 在css3里面,你可以再一个标签元素里应用多个 ...
- CSS背景和CSS3背景background属性
css背景属性用于定义HTML元素的背景 背景属性既可以为单个的单元设置背景,也可以为整个页面设置背景,可以对上述二者的任意组合设置背景,段落.文字.不同状态的链接.图像.内容区域修改其背景样式.设置 ...
- background复合属性详解（上）：background-image
background复合属性是个很复杂的属性,花样非常多,比较神奇的是css3 中支持多图片背景了,这篇文章先讲讲background-image属性,其他背景属性会在后续的文章综合总结. 一.最基本 ...
- CSS3的新增边框属性
一.CSS3 新增的边框属性 属性 版本 简介 border-image CSS3 设置或检索对象的边框使用图像来填充 border-image-source CSS3 设置或检索对象的边框是否用图像 ...
- CSS3：布局display属性的flex（弹性布局）
CSS3:布局display属性的flex(弹性布局) 一.简介 Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性.设为Flex布局以后, ...
- css3 背景background
Css3背景<background> Css3包含多个新的背景属性,它们提供了对背景更强大的控制.可以自定义背景图的大小,可以规定背景图片的定位区域,css3还允许我们为元素使用多个背景图 ...
- css中background背景属性概
css中background背景属性概 background:url(背景图片路径) no-repeat;/*不重复默认在左上方*/background:url(背景图片路径) no-repeat ...
- CSS3：不可思议的border属性&Web字体图标Font Awesome
CSS3:不可思议的border属性 转载至——译文:不可思议的CSS border属性 原文:Magic of CSS border property Web字体图标Font Awesome 转载 ...
- CSS3学习之 animation 属性
发现animation这个新属性很有趣,在此学习,并整理下! 浏览器支持: Internet Explorer 10.Firefox 以及 Opera 支持 animation 属性: Safari ...
随机推荐
- iOS-iOS开发简单介绍
概览 终于到了真正接触IOS应用程序的时刻了,之前我们花了很多时间去讨论C语言.ObjC等知识,对于很多朋友而言开发IOS第一天就想直接看到成果,看到可以运行的IOS程序.但是这里我想强调一下,前面的 ...
- 对Big Table进行全表更新，导致 Replication 同步数据的过程十分缓慢
在Publisher database中更新一个big table,数据行数是3.4亿多.由于没有更新 clustered Index key,因此,只产生了3.4亿多个Update Commands ...
- Logical read, Physical read (SET STATISTICS IO)
在查询性能优化时,Logical Read非常重要,它的计数一般与查询出来的结果集数量成正比,与数据读取的速度也成正比. 1,SET STATISTICS IO 显式Disk IO的信息 Syntax ...
- Newtonsoft.json中 linq to json 和序列化哪个快？
Newtonsoft.json是最常用的json序列化组件,当然他不是最快的,但是是功能最全的.. using System; using System.Collections.Generic; us ...
- jQuery 2.0.3 源码分析core - 整体架构
拜读一个开源框架,最想学到的就是设计的思想和实现的技巧. 废话不多说,jquery这么多年了分析都写烂了,老早以前就拜读过, 不过这几年都是做移动端,一直御用zepto, 最近抽出点时间把jquery ...
- 10年C#历程的MVP之路与MVP项目介绍
本博客所有文章分类的总目录:http://www.cnblogs.com/asxinyu/p/4288836.html 1.意外的惊喜 10月份收到微软总部寄来的荣誉证书,非常激动, ...
- Android探索之BroadcastReceiver具体使用以及安全性探究
前言: 最近的计划是学习一下iOS的NSNotificationCenter,突然想起来的Android的广播机制,所以还是觉得先对BroadcastReceiver来个全面的总结然后再去学习NSNo ...
- No row with the given identifier exists:
最近在弄一个后台项目,有用到hibernate操作数据库.写hql语句表一对一关联查询的时候报这个错误.受到了csdn上一篇博客的启发,解决了我的问题.他的博客地址:http://blog.csdn. ...
- 用Canvas+Javascript FileAPI 实现一个跨平台的图片剪切、滤镜处理、上传下载工具
直接上代码,其中上传功能需要自己配置允许跨域的文件服务器地址~ 或者将html文件贴到您的站点下同源上传也OK. 支持: 不同尺寸图片获取. 原图缩小放大. 原图移动. 选择框大小改变. 下载选中的区 ...
- 如何部署Icinga服务端
Icinga是Nagios的一个变种,配置,使用方式几乎一样,而且完全兼容Nagios的插件.所以下面的部署方案对Nagios同样使用. 它还推出了两个中文版本,icinga-cn原版和icinga- ...