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. Python核心编程--浅拷贝与深拷贝

    一.问题引出浅拷贝 首先看下面代码的执行情况: a = [1, 2, 3] print('a = %s' % a) # a = [1, 2, 3] b = a print('b = %s' % b) ...

  2. struts快速入门第一篇 —— struts相关XML配置映射及讲解

    我们回忆一下在学习JavaWeb过程中(Jsp + servlet编程)所感受到的Servlet的不足: 1 Servllet很多时,web.xml中的代码会很多.这样一来,维护起来就不方便,不利于团 ...

  3. python内置函数与匿名函数

    内置函数 Built-in Functions abs() dict() help() min() setattr() all() dir() hex() next() slice() any() d ...

  4. Windows上Python2与Python3共存

    首先安装好python2与python3版本 因为安装顺序的不同,所以系统默认的版本也不同.如果先安装的是python,那么系统默认的就是python2 如果根据需求需要使用不同的版本,可以使用py命 ...

  5. thinkinginjava学习笔记10_容器

    Java中并没有像Perl.Python.Ruby那样对容器有直接的支持,但是可以依靠容器类来完成相同的工作: 泛型 使用一个ArrayList对象可以保存一系列的对象,如: ArrayList ap ...

  6. ${param.name}和${name}的区别

    ${param.name} == request.getParam("name") ${name} == request.getAttribute("name" ...

  7. git命令记录

    1, clone 远程分支 git clone 命令默认的只会建立master分支,如果你想clone指定的某一远程分支(如:dev)的话,可以如下: A. 查看所有分支(包括隐藏的)  git br ...

  8. CentOS环境下tomcat启动超级慢的解决方案

    在本地开发环境,应用正常启动. 在CentOS测试环境,应用启动速度也是正常的. 但是在阿里云的生产环境,tomcat启动超级慢,并且在最终打印出来以下内容: org.apache.catalina. ...

  9. 编程范式:命令式编程(Imperative)、声明式编程(Declarative)和函数式编程(Functional)

    主要的编程范式有三种:命令式编程,声明式编程和函数式编程. 命令式编程: 命令式编程的主要思想是关注计算机执行的步骤,即一步一步告诉计算机先做什么再做什么. 比如:如果你想在一个数字集合 collec ...

  10. php 抽象类和接口类

    PHP中抽象类和接口类都是特殊类,通常配合面向对象的多态性一起使用. 相同: ①两者都是抽象类,都不能实例化. ②只有接口类的实现类和抽象类的子类实现了 已经声明的 抽象方法才能被实例化. 不同: ① ...