background-size 属性" title="CSS3 background-size 属性">

定义和用法

background-size 属性规定背景图像的尺寸。

默认值: auto
继承性: no
版本: CSS3
JavaScript 语法: object.style.backgroundSize="60px 80px"

语法

background-size: length|percentage|cover|contain;
描述 测试
length

设置背景图像的高度和宽度。

第一个值设置宽度,第二个值设置高度。

如果只设置一个值,则第二个值会被设置为 "auto"。

测试
percentage

以父元素的百分比来设置背景图像的宽度和高度。

第一个值设置宽度,第二个值设置高度。

如果只设置一个值,则第二个值会被设置为 "auto"。

测试
cover

把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。

背景图像的某些部分也许无法显示在背景定位区域中。

测试
contain 把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。 测试

亲自试一试 - 实例

拉伸背景图像
拉伸背景图像来完全覆盖内容区域。
拉伸背景图像,对背景图像水平复制四次
对背景图像进行拉伸,以使背景图像恰好水平复制四次。

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实现

    花了很长时间撸了个网站,观点,其中需要一个图片放大功能,网上找了半天发现都没有中意的,最后无奈之下自己写了一个,演示地址,演示图片: 自我感觉效果还不错,现在分享开来给大家看看,哪里不好还请多多指教, ...

  2. xampp的安装和配置

    这几天一直在做一个网站,客户要求要用PHP修改WordPress的themes,目的是交付完成后,客户自己管理方便. 以前从没有涉及过PHP,用的是jsp,但是,既然已经选择接受,就只能让自己去适应客 ...

  3. 一起学Linux02之Linux系统启动过程

    这个Linux系统启动过程啊,说实话,我认为,刚学习的时候看几遍,了解一下就好.现在的主要任务是用.熟练了之后再来深究这个不急. 下面我就简单地说说吧. Linux系统的启动主要分为下列步骤: 1 内 ...

  4. 鸟哥的linux私房菜学习-(一)优缺点分析以及主机规划与磁盘分区

    一.linux的优缺点 那干嘛要使用Linux做为我们的主机系统呢?这是因为Linux有底下这些优点: 稳定的系统:Linux本来就是基于Unix概念而发展出来的操作系统,因此,Linux具有与Uni ...

  5. python字符集的转换(mysql数据乱码的处理)

    本文参考:http://blog.csdn.net/crazyhacking/article/details/39375535 chardet模块:http://blog.csdn.net/tianz ...

  6. MicroPython-GPS教程之TPYBoardv702控制5110显示当前经纬度

    一.关于TPYBoardV702 TPYBoardV702是目前市面上唯一支持通信定位功能的MicroPython开发板:支持Python3.0及以上版本直接运行.支持GPS+北斗双模定位.GPRS通 ...

  7. 【python3之文件操作】

    一.文件操作 1.文件处理的流程 1)打开文件,得到文件句柄并赋值给一个变量 2)通过句柄对文件进行操作 3)关闭文件 例如: f = open('chenli.txt') #打开文件 first_l ...

  8. Python可视化库Matplotlib的使用

    一.导入数据 import pandas as pd unrate = pd.read_csv('unrate.csv') unrate['DATE'] = pd.to_datetime(unrate ...

  9. Mongo查询关键字

  10. HTML知识点总结之div、section标签

    div元素 div是块级元素,相当于一个容器,在语义上不代表任何特定类型的内容.主要用作大的框架布局,也就是说网页的骨架主要通过div来架设的,而网页的血肉则是有span.p或者ul等元素完成. se ...