请复制粘贴，图片请自带

<!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. [小工具]CSS内嵌样式自动提取器

    逐行分析,将内联样式提取出来,并自动编号代替的一个小工具软件 注:style=""(此处必须是标准的双引号!) http://files.cnblogs.com/quejuwen/ ...

  2. 介绍开源的.net通信框架NetworkComms框架 源码分析（十八 ） ConnectionListenerBase

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

  3. Android使用SAX解析XML(5)

    parse_handler.java文件: package com.hzhi.my_sax; import org.xml.sax.Attributes; import org.xml.sax.SAX ...

  4. 11.21 if条件语句 年月日执行判断

    <script language="javascript"> var nian=prompt("输入一个年份","") if(n ...

  5. 2016弱校联盟十一专场10.2---Around the World（深搜+组合数、逆元）

    题目链接 https://acm.bnu.edu.cn/v3/problem_show.php?pid=52305 problem  description In ICPCCamp, there ar ...

  6. linux常用命令之文件权限

    CHGRP chgrp – change group ownership,改变组别的所有权 用法 chgrp 组别名 文件\目录名 选项 -R  (recursive)递归改变,将目录下所有的文件和目 ...

  7. CamanJS – 提供各种图片处理的 JavaScript 库

    CamanJS 是一个基于 Canvas 处理图片的 Javascript 库,结合简单易用的接口和先进高效的图像编辑技术.CamanJS 很容易扩展新的过滤器和插件,并伴随着一系列广泛的图像编辑功能 ...

  8. asp.net保存网上图片到服务器

    本文讲述的是根据一个图片的url地址,保存图片到asp.net服务器端的实现方法. 可以先了解这篇文章http://keleyi.com/a/bjac/0899dpgi.htm,以更好的理解本文. 首 ...

  9. windows Python 3.4.3 安装图文

    1.去官网(https://www.python.org/downloads/)下载软件. 2.运行安装程序: 下一步 next. 下一步 next 全部选中,下一步 next. 安装中..来自:ht ...

  10. windows 安装 go语言

    下载地址:http://www.cnblogs.com/osfipin/p/4856839.html. 官方教程说明: Windows 对于Windows用户,Go项目提供两种安装选项(从源码安装除外 ...