请复制粘贴，图片请自带

<!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. 新学C++的for,switch和随机数

    通过一个小程序学习: #include<iostream> #include<cstdlib> #include<ctime> using namespace st ...

  2. 介绍开源的.net通信框架NetworkComms框架 源码分析（六）SendReceiveOptions

    原文网址: http://www.cnblogs.com/csdev Networkcomms 是一款C# 语言编写的TCP/UDP通信框架  作者是英国人  以前是收费的 目前作者已经开源  许可是 ...

  3. Android使用SQLite数据库(3)

    插入新数据到SQLite数据库,首先定义一个ContentValues变量,然后使用put方法: public void put (String key, String value) 其中key是字段 ...

  4. Delphi Mac App 名称支持国际化多语显示

    作用:在 OSX 图标下方显示 App 中文繁体或简体的名称(系统自动选取) 适用:XE7, XE8 for OSX 操作: 创建一个新工程. 在工程目录下创建二个文件夹(zh_??.lproj)文件 ...

  5. 【转】Android世界的Swift - Kotlin语言

    最近Oracle又在和Google撕的厉害,才知道还有这么Kotlin在Android像Swift在Mac的地位一说. Kotlin是一门与Swift类似的静态类型JVM语言,由JetBrains设计 ...

  6. Redis配置集群二（window）

    第一篇那redis的基础命令都差不多讲了一遍了,这篇就将怎么配置集群了,最后要达到的效果是一台主redis,还有几台从的redis,每次数据都是同步的,当主redis挂掉了,那么就会从几台从redis ...

  7. JQuery的调用

    在head标签中引用一个JQuery的文件用以制作鼠标点击动画,(JQuery包可从网上下载)   JS包,脚本语言 <script language="javascript" ...

  8. Word, PPT和Excel的常用技巧（持续更新）

    本文的目的是记录平时使用Word, PowerPoint和Excel的过程中的一些小技巧,用于提升工作效率. 此文会不定期的更新,更新频率完全取决于实际使用遇到的问题的次数. 目录 Word Powe ...

  9. 用SQL语句添加删除修改字段_常用SQL

    1.增加字段     alter table docdsp     add dspcodechar(200)2.删除字段     ALTER TABLE table_NAME DROP COLUMNc ...

  10. 大家一起撸代码之——Hibernate各种主键生成策略与配置详解

    1.assigned 主键由外部程序负责生成,在 save() 之前必须指定一个.Hibernate不负责维护主键生成.与Hibernate和底层数据库都无关,可以跨数据库.在存储对象前,必须要使用主 ...