请复制粘贴，图片请自带

<!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. 关于CodeFirst异常：无法确定类型'XXX'和类型‘YYY’之间的关联的主体端，必须使用关系 Fluent API 或数据注释显式配置此关联的主体端。

    此错误的原因是,你配置两个实体间的关系为一对一 然而我认为的一对一关系是,两者之间必须存在一个主体, 也就是说,你不能表1的外键是表2的主键并且表1的主键是表2的外键, 这样不符合数据库式吧? 我想多 ...

  2. 温故而知新--sql存储过程复习

    存储过程是已编译好的T-SQL语句的集合,可以随时调用,速度快,不易出错. 可以传递参数,普通参数和输出参数(output) 实例1 create proc Newpro @testVarA int, ...

  3. C# winform OpenFileDialog MessageBox

    1.弹出窗体选择本地文件-OpenFileDialog OpenFileDialog openFileDialog = new OpenFileDialog(); openFileDialog.Tit ...

  4. qt 自动产生 Guid 方法

    strcpy(cmd->uid,QUuid::createUuid().toString().toStdString().c_str());

  5. div css仿京东订单流程图样式代码

    效果展示 http://hovertree.com/texiao/css/25/ 本效果适合PC,也适合移动端 手机扫描二维码查看效果: 效果图: 代码如下: <!DOCTYPE html> ...

  6. linq查询xml

    1.加载xml字符串 XElement root = XElement.Parse(@"<?xml version='1.0' encoding='utf-8'?> <It ...

  7. Ubuntu密码错误的问题

    安装了一个Ubuntu,启动以后进入终端,想su root,提示输入密码,输入了很多次密码(我的用户密码和root密码是一样的),总是Login incorrect. 后来输入了用户名,提示输入密码, ...

  8. 对状态空间图搜索的几种算法比较（图）【深度、宽度、动态规划（均一代价）、最佳优先和A*算法】

    ---------------------------------------------------------------------------------------------------- ...

  9. ThinkCMF变量输出+使用函数

    ThinkCMF变量输出+使用函数的方式同ThinkPHP. ThinkPHP变量输出: 在模板中输出变量的方法很简单,例如,在控制器中我们给模板变量赋值: $name = 'ThinkPHP'; $ ...

  10. Alfresco 4 项目介绍

    body{ font: 16px/1.5em 微软雅黑,arial,verdana,helvetica,sans-serif; }       Alfresco 是一个开源的企业内容管理系统(ECM) ...