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 ...
随机推荐
- java线程 公平锁 ReentrantLock(boolean fair)
一.公平锁 1.为什么有公平锁 CPU在调度线程的时候是在等待队列里随机挑选一个线程,由于这种随机性所以是无法保证线程先到先得的(synchronized控制的锁就是这种非公平锁).但这样就会产生饥饿 ...
- Sql Server系列：系统函数
1. 返回表中指定字段的长度值COL_LENGTH 返回列的定义长度(以字节为单位). 语法: COL_LENGTH ( 'table' , 'column' ) 示例: SELECT COL_LEN ...
- python3 字符串与列表常用功能
一.字符串常用功能 1. capitalize(),将字符串的首字母变成大写,其余全部置为小写:如果字符串中有多个单词,也只是将第一个单词的首字母置为大写:例: >>> name = ...
- 关于xcode导出设置中的一些概念
Development Certificates:在电脑通过秘钥串生成一个私人秘钥,这就是:CertificateSigningRequest.certSigningRequest 简称CSR,团队中 ...
- Android 之 ProgressDialog用法介绍
布局文件测试: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" androi ...
- ORM开发之解析lambda实现完整查询(附测试例子)
上次讲解了怎么解析匿名对象(ORM开发之解析lambda实现group查询),这次来实现解析二元运算,完成基本条件语法 先看一个表达式 query.Where(b => b.Number == ...
- DotNet指定文件显示的尺寸
在项目中开发中,有时候需要将文件的尺寸进行控制,例如需要将文件的尺寸指定为字节,TB等.现在提供一个方法,实现将指定文件的尺寸, 提供:"字节", "KB", ...
- Java中读文件操作
InputStream & Reader InputStream(字节流),如下是InputStream的层次结构: AudioInputStream:音频输入流类,该方法可以: 从外部音频文 ...
- Android封装OkHttpClient的类库
由于android6.0的SDK没有HttpClient,只有HttpURLConnection和OkHttpClient,特记下OkHttpClient的使用方法 1.Ui测试界面布局 <?x ...
- deployment与Web应用程序部署
定义用于支持 Web 应用程序部署的配置设置. <deployment retail="true|false" /> retail属性:设置一个值,该值指定是否以发布模 ...