当设置值为cover,可以呈现出图片铺满浏览器内容的视觉效果

实例

规定背景图像的尺寸:

div
{
background:url(img_flwr.gif);
background-size:80px 60px;
background-repeat:no-repeat;
}

定义和用法

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 属性值:cover的更多相关文章

  1. CSS3教程:pointer-events属性值详解 阻止穿透点击

    转:http://www.poluoluo.com/jzxy/201109/142876.html 在某个项目中,很多元素需要定位在一个地图层上面,这里就要用到很多绝对定位或者相对定位的元素,但是这样 ...

  2. css3 background

    background是一个很重要的css属性,在css3中新增了很多内容.一方面是原有属性新增了属性值,另一方面就是新增了3个属性. 一.css3中新增属性值介绍 css2的background有5个 ...

  3. webdriver高级应用- 改变一个页面对象的属性值

    适用于一些无法操作的元素,可以直接改他的属性从而操作,代码如下: #encoding=utf-8 from selenium import webdriver import unittest impo ...

  4. selenium--更改标签的属性值

    前戏 在进行web自动化的时候,我们有时需要获取元素的属性,有时需要添加,有时需要删除,这时候就要通过js来进行操作了 实战 from selenium import webdriver import ...

  5. CSS3 background属性

    background: #00FF00 url(bgimage.gif) no-repeat fixed top; background 简写属性在一个声明中设置所有的背景属性. 可以设置如下属性: ...

  6. 通过CSS3属性值的变化实现动画效果+触发这些动画产生交互

    css3过渡 transition 兼容性:IE10+ transition: none | all | property 默认为none all 表示所有属性过渡 property 指定属性值,如c ...

  7. CSS3中transform几个属性值的注意点

    transform(变形)是CSS3中的元素的属性,transform的属性值主要包括旋转rotate.扭曲skew.缩放scale和移动translate以及矩阵变形matrix 基本用法可以参考文 ...

  8. C# 调用存储过程出错:String[3]: Size 属性具有无效大小值 0

    存储过程如下 Create PROCEDURE [dbo].[Test] @FundId int, @vchStrategyToken nvarchar(), @ErrorMessage nvarch ...

  9. EF执行存储工程报错 String[4]: Size 属性具有无效大小值 0。

    EF中执行存储过程报错 String[4]: Size 属性具有无效大小值 0 排查后是如下问题所致,给定的参数没有设定大小(加入红框内的就可以了) private string GetCode(MC ...

  10. css3中animation属性animation-timing-function知识点以及其属性值steps()

    在animation中最重要的其实就是时间函数(animation-timing-function)这个属性,他决定了你的动画将以什么样的速度执行,所以最关键的属性值也就是cubic-bezier(n ...

随机推荐

  1. Nginx 配置文件详解

    user nginx ; #用户 worker_processes 8; #工作进程,根据硬件调整,大于等于cpu核数 error_log logs/nginx_error.log crit; #错误 ...

  2. 初学hibernate之缓存

    一.1.Session级别缓存属于一级缓存,持久化对象保存在Session一级缓存中(一级缓存引用持久化对象地址),只要session不关闭,一级缓存就存在,缓存中对象也不会被回收: Session会 ...

  3. Css transition

    CSS的transition允许CSS的属性值在一定的时间区间内平滑地过渡.这种效果可以在鼠标单击.获得焦点.被点击或对元素任何改变中触发,并圆滑地以动画效果改变CSS的属性值. <!DOCTY ...

  4. windows下安装redis以及简单的事例

    1.安装服务端下载地址:http://code.google.com/p/servicestack/wiki/RedisWindowsDownload我下载了一个 redis-2.0.0服务器包,解压 ...

  5. 第三方br查询工具害人不浅

    第三方br查询工具害人不浅,查询的时候会大批量调用百度的数据库,为什么说是大批量查询呢? 首先是自己查询,心急的站长恨不得下一次刷新br时数值会有所提高,不是那么急的也会一天查一次或几天一次,记录网站 ...

  6. Microsoft.ReportViewer.WebForms, Version=10.0.0.0的报错问题,解决方案

    未能加载文件或程序集,或者web.config报错! 已解决:直接找到(默认在 路径/Microsoft Visual Studio 8/ReportViewer).把里面的3个DLL传上去就OK了! ...

  7. 代码规范和常用的js插件以及测试工具

    1.代码规范 .model层 1.1.1database file_proerty 1.1.2java fileProperty. 1.2.字段要有空指针 1.3.不创建爱数据库外键约束 1.4.已知 ...

  8. 他们在军训,我在搞 OI(二)

    Day 2 7:26 2016/8/25 新的一天又开始了! 走在上学的路上,抬头看看北京少有的蓝天,太阳的威力不再那么明显,甚至输给了挡住它的云朵.迎面吹来了凉爽的风,夏天的燥热,早已无影无踪. 许 ...

  9. html 构建响应式网站之viewport的使用

    在网页代码的头部,加入一行viewport元标签 <!DOCTYPE html> <html lang="en"> <head> <met ...

  10. Linux 高可用开源方案 Keepalived VS Heartbeat对比

    1)Keepalived使用更简单:从安装.配置.使用.维护等角度上对比,Keepalived都比Heartbeat要简单得多,尤其是Heartbeat2.1.4后拆分成3个子项目,安装.配置.使用都 ...