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. PhoneGap开发环境搭建

    项目中要用PhoneGap开发,了解了下基本规则,记录一下,以备后查.(只针对Android平台) 一.安装 在安装PhoneGap开发环境之前,需要先安装以下框架: 1.Java SDK 2.Ecl ...

  2. cleanMyMac

    想看外国网站可以找我,facebook.youtube.XX大片等,只要8元钱,无限制用到服务器关闭.看大片流畅不成问题 需要cleanMyMac的请加微信只要10或直接拍 http://a.p6ff ...

  3. centos7 安装solr

    1 下载solr安装包 下载6.4.1版本 2.创建 存放数据的文件夹 solr_data 和 安装目录 solr_installation 3.进入solr的bin目录执行 /install_sol ...

  4. openldap 搭建

    环境构建 1)软件安装: yum -y install openldap-servers openldap-clients openldap openldap-devel migrationtools ...

  5. [js高手之路]html5 canvas动画教程 - 边界判断与反弹

    备注:本文后面的代码,如果加载了ball.js,那么请使用这篇文章[js高手之路] html5 canvas动画教程 - 匀速运动的ball.js代码. 边界反弹: 当小球碰到canvas的四个方向的 ...

  6. select模型

    在Windows中所有的socket函数都是阻塞类型的,也就是说只有网络中有特定的事件发生时才会返回,在没有发生事件时会一直等待,虽说我们将它们设置为非阻塞状态,但是在对于服务器段而言,肯定会一直等待 ...

  7. ghost.py在代用JavaScript时的超时问题

    在写爬虫的时候,关于JavaScript的解析问题,我在网上找到的一个解决方案是使用ghost.py这个模块,他是一个基于webkit封装的一个客户端,可以用来解析动态页面.它的使用非常简单,它从2. ...

  8. ABAP开发人员未来应该学些什么

    2007年1月我大学毕业进入SAP Chengdu从事开发工作,到今天已经整整11年了. 这张图在ABAP开发圈子里曾广为流传: 为了避免这种窘境发生在ABAPer身上,我们应该做点什么呢? 2017 ...

  9. iOS学习——UIAlertController详解

    在开发中,弹出提示框是必不可少的.这两天项目中统一对已经被iOS API废弃的UIAlertView和UIActionSheet进行替换,我们知道,UIAlertView和UIActionSheet都 ...

  10. 加速scp传输速度

    当需要在机器之间传输400GB文件的时候,你就会非常在意传输的速度了.默认情况下(约125MB带宽,网络延迟17ms,Intel E5-2430,本文后续讨论默认是指该环境),scp的速度约为40MB ...