请复制粘贴，图片请自带

<!DOCTYPE html > <html > <head> <meta charset="utf-8"> <title>标题</title> <script type="text/javascript" src="../js/jquery-1.4.min.js"></script>
<style type="text/css">
textarea{display: block; width:500px;height:500px; margin:100px auto; }
.div{ width: 250px; height: 200px; border: solid 2px red ;margin: 10px;float: left; }
.div1{
background: url(date/1.png);
}
.div2{
background: url(date/1.png) no-repeat;
}
.div3{
background: url(date/1.png) no-repeat center center;
}
.div4{
background: url(date/1.png);
background-size: 100%;
}
.div5{
background: url(date/1.png) no-repeat center center;
background-size: 100%;
}
.div6{
background: url(date/1.png) center center;
background-size: 100px 100px;
}
.div7{
background: url(date/1.png);
background-size: 100px 100px;
}
.div8{
background: url(date/1.png) ;
background-size: 100% 100%;
}
.div9{
background: url(date/1.png) center;
background-size: 100% ;
}
.div10{
background: url(date/1.png) no-repeat ;
background-size:cover;
}
.div11{
background: url(date/1.png) no-repeat center ;
background-size:contain;
}
.div12{
background: url(date/1.png) center ;
background-size: auto;
}
</style><script type="text/javascript">
</script>
</head> <body>
<div class="div div1">.div1{background: url(date/1.png); }</div>
<div class="div div2">background: url(date/1.png) no-repeat;</div>
<div class="div div3">background: url(date/1.png) no-repeat center center; </div>
<div class="div div4"></div>
<div class="div div5"></div>
<div class="div div6"></div>
<div class="div div7"></div>
<div class="div div8"></div>
<div class="div div9"></div>
<div class="div div10"></div>
<div class="div div11"></div>
<div class="div div12"></div>
<textarea style="">
background-size指定背景大小，以象素或百分比显示。当指定为百分比时，大小会由所在区域的宽度、高度，以及background-origin的位置决定。还可以通过cover和contain来对图片进行伸缩。
background-size可以设置2个值，1个为必填，1个为可选。
第1个值用于指定背景图的width，
第2个值用于指定背景图的height。
如果只给background-size设置1个值，则第2个值默认为auto（cover和contain特定值除外）。
background-size: 100px 200px;背景宽100px，高200px；
background-size: 100% 100%;背景充满
background-size:cover; 缩放图像的最小值，其宽度和高度都能放入内容区域
background-size:contain;缩放图像的最大值，其宽度和高度都能放入内容区域
div {
background: url('../images/p1_bg.jpg') no-repeat center center;
background-size: 100%;
}
</textarea>
</body>
</html>

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

  1. CSS3 background属性

    background: #00FF00 url(bgimage.gif) no-repeat fixed top; background 简写属性在一个声明中设置所有的背景属性. 可以设置如下属性: ...

  2. css3 background

    background是一个很重要的css属性,在css3中新增了很多内容.一方面是原有属性新增了属性值,另一方面就是新增了3个属性. 一.css3中新增属性值介绍 css2的background有5个 ...

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

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

  4. CSS3利用text-shadow属性实现多种效果的文字样式展现

    一.效过图展示: 已经是比较久之前学习的文字效果了.但是还是很实用很有趣的.利用CSS3提供的text-shadow属性可以给页面上的文字添加阴影效果,因此可以替换掉之前使用过的一些繁琐的图片.到目前 ...

  5. CSS3中动画属性transform、transition 和 animation

    CSS3中和动画有关的属性有三个 transform.transition 和 animation.下面来一一说明:        transform   从字面来看transform的释义为改变,使 ...

  6. CSS3新增文本属性实现图片点击切换效果

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. 半深入理解CSS3 object-position/object-fit属性

    半深入理解CSS3 object-position/object-fit属性 转载:https://www.zhangxinxu.com/wordpress/2015/03/css3-object-p ...

  8. CSS3：文字属性

    文字属性注意的细节: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...

  9. 利用css3的text-shadow属性实现文字阴影乳白效果

    现在CSS3+html5的网页应用的越来越广泛了.很多网页中的字体同样可以用CSS3来实现炫酷的效果. 下面就介绍一下利用css3的text-shadow属性实现文字阴影乳白效果.这是在设计达人上面看 ...

  10. CSS3的新属性

    1.圆角矩形 .border_radius_test{ border-radius:25px; -moz-border-radius:25px; } 数值越大越圆 2.容器阴影 .box_shadow ...

随机推荐

  1. jquery基本选择器匹配多个元素

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. FireMonkey ListView 自动计算行高

    说明:展示 ListView 视其每一行 Item 的 Detail 字串长度自动调整高度(可每行高度不同). 适用:Delphi XE7 / XE8 源码下载:[原创]ListView_自动计算行高 ...

  3. HDU 4293---Groups(区间DP)

    题目链接 http://acm.split.hdu.edu.cn/showproblem.php?pid=4293 Problem Description After the regional con ...

  4. EffectiveJava——请不要在代码中使用原生态类型

    先看一个栗子,看看能不能找出来里面的错误: /** * 请不要在新代码中使用原生态类型 * @author weishiyao * */ public class Test { public stat ...

  5. 浅谈spring security 403机制

    403就是access denied ,就是请求拒绝,因为权限不足 三种权限级别 一.无权限访问 <security:http security="none" pattern ...

  6. PCL -语法错误:“::” error C2589: “(”:“::”右边的非法标记

    1.错误原因:系统函数与pcl中的max函数冲突导致的 2.两种解决办法: 1)错误中max和min函数用括号括起来,例如"std::Max"修改为“(std::Max)”. 2) ...

  7. Entity Framework 笔记（一）

    Entity Framework概述 EF是一个对象关系映射(ORM)框架,允许开发人员使用特定于域的对象关系型数据,开发人员通常不需要编写大量的数据访问代码.使用EF,开发者可以利用LINQ进行查询 ...

  8. ENVI【非监督分类】

    非监督分类的概念: 非监督分类,又称“聚类分析或者点群分析”.在多光谱图像中搜寻.定义其自然相似光谱集群的过程.它不必对图像地物获取先验知识,仅依靠图像上不同地物光谱信息进行特征提取,在统计特征的差别 ...

  9. FancySelect – 更好用的 jQuery 下拉选择框插件

    FancySelect 这款插件是 Web 开发中下拉框功能的一个更好的选择.FancySelect 使用方便,只要绑定页面上的任何 Select 元素,并调用就 .fancySelect() 就可以 ...

  10. 设计人员应该看的15个很酷的 iOS 8 设计

    苹果新一代智能手机 iPhone 6 发布已经有一段时间了,一些创意设计师已经开始在设计中采用 iOS 8 设计理念.当然,其中有些是对于未来的展望和大胆的设计.我在这里收集了15个很酷的 iOS 8 ...