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 ...
随机推荐
- Android-Notification-简单的demo
通知,几乎存在于每一个 Android 的应用中,新闻客户端来一条新闻的时候会给你发一条通知,QQ.微信有新消息来的时候会给你发一条通知,反正,通知就像魔鬼般一直缠绕在我们的左右.所以,Android ...
- angularjs指令参数transclude
angularjs指令参数transclude transclude翻译为嵌入,和之前看到的vue中的slots作用差不多,目的是将指令元素的子内容嵌入到指令的模板中 定义指令 <div sid ...
- thinkPHP入门之二
thinkphp提供了很多便利的方法,因为php要记的东西太多了,而thinkphp极大简化了这些,让编写过程更加快速. 为了预防那些了解它的人胡乱玩耍,thinkphp提供一个函数_empty 它是 ...
- jQuery 2.0.3 源码分析 数据缓存
历史背景: jQuery从1.2.3版本引入数据缓存系统,主要的原因就是早期的事件系统 Dean Edwards 的 ddEvent.js代码 带来的问题: 没有一个系统的缓存机制,它把事件的回调都放 ...
- java.util.NoSuchElementException: Timeout waiting for idle object
出现这个问题第一个想法就是连接池的参数设置问题,把最大连接数量设置大一些就行了,但是我就一个客服端访问服务器,连接池连接数量不可能会不够用.我的项目架构是spring mvc+hibernate,用s ...
- 生成Kindle可读的mobi和PDF电子书
购买kindle之后,自然欣喜万分,不来自于工具本身,而来自于发现自己能够静下心来阅读长篇和复杂的文字了,可喜可贺.更重要的是,kindle减轻了我眼睛的莫大的压力.但马上就出现几个问题: 不是所有的 ...
- 一个简易的MysQL性能查询脚本
如下: #!/bin/sh mysqladmin -P3306 -uroot -p ext |\ awk -F"|" \ "BEGIN{ count=0; }" ...
- 结婚虽易，终老不易：EntityFramework和AutoMapper的婚后生活
写在前面 我到底是什么? 越界的可怕 做好自己 后记 上一篇<恋爱虽易,相处不易:当EntityFramework爱上AutoMapper>文章的最后提到,虽然AutoMapper为了En ...
- DotNet的JSON序列化与反序列化
JSON(JavaScript Object Notation)JavaScript对象表示法,它是一种基于文本,独立于语言的轻量级数据交换格式.在现在的通信中,较多的采用JSON数据格式,JSON有 ...
- IO多路复用之epoll总结
1.基本知识 epoll是在2.6内核中提出的,是之前的select和poll的增强版本.相对于select和poll来说,epoll更加灵活,没有描述符限制.epoll使用一个文件描述符管理多个描述 ...