CSS3 background-size 属性值:cover
当设置值为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的更多相关文章
- CSS3教程:pointer-events属性值详解 阻止穿透点击
转:http://www.poluoluo.com/jzxy/201109/142876.html 在某个项目中,很多元素需要定位在一个地图层上面,这里就要用到很多绝对定位或者相对定位的元素,但是这样 ...
- css3 background
background是一个很重要的css属性,在css3中新增了很多内容.一方面是原有属性新增了属性值,另一方面就是新增了3个属性. 一.css3中新增属性值介绍 css2的background有5个 ...
- webdriver高级应用- 改变一个页面对象的属性值
适用于一些无法操作的元素,可以直接改他的属性从而操作,代码如下: #encoding=utf-8 from selenium import webdriver import unittest impo ...
- selenium--更改标签的属性值
前戏 在进行web自动化的时候,我们有时需要获取元素的属性,有时需要添加,有时需要删除,这时候就要通过js来进行操作了 实战 from selenium import webdriver import ...
- CSS3 background属性
background: #00FF00 url(bgimage.gif) no-repeat fixed top; background 简写属性在一个声明中设置所有的背景属性. 可以设置如下属性: ...
- 通过CSS3属性值的变化实现动画效果+触发这些动画产生交互
css3过渡 transition 兼容性:IE10+ transition: none | all | property 默认为none all 表示所有属性过渡 property 指定属性值,如c ...
- CSS3中transform几个属性值的注意点
transform(变形)是CSS3中的元素的属性,transform的属性值主要包括旋转rotate.扭曲skew.缩放scale和移动translate以及矩阵变形matrix 基本用法可以参考文 ...
- C# 调用存储过程出错:String[3]: Size 属性具有无效大小值 0
存储过程如下 Create PROCEDURE [dbo].[Test] @FundId int, @vchStrategyToken nvarchar(), @ErrorMessage nvarch ...
- EF执行存储工程报错 String[4]: Size 属性具有无效大小值 0。
EF中执行存储过程报错 String[4]: Size 属性具有无效大小值 0 排查后是如下问题所致,给定的参数没有设定大小(加入红框内的就可以了) private string GetCode(MC ...
- css3中animation属性animation-timing-function知识点以及其属性值steps()
在animation中最重要的其实就是时间函数(animation-timing-function)这个属性,他决定了你的动画将以什么样的速度执行,所以最关键的属性值也就是cubic-bezier(n ...
随机推荐
- linux经典命令学习
本文介绍Linux系统的若干经典命令的常用方法. (一)grep 主要用于搜索文件内容,查看是否跟要求的pattern相匹配. 1.grep -l 'boss' * 显示所有包含boss ...
- WinForm中动态添加控件 出现事件混乱,解决办法记录。
还是在抢票软件中出的问题,我没点击一个联系人,要生成一排控件,其中有席别combobox这样的下拉框控件,会出现如下图所示的问题:问题描述:在代码中动态创建的控件,事件混乱了,一个控件触发了所有同类型 ...
- BlockingQueue详解
本例介绍一个特殊的队列:BlockingQueue,如果BlockingQueue是空的,从BlockingQueue取东西的操作将会被阻断进入 等待状态,直到BlockingQueue进了东西才会被 ...
- absolute布局和css布局释疑
jqueryui也不是万能的, 有时候, 也需要自己写一些, 由 css 和jquery结合的一些东西, 如: banner中, 依次播放的div等 ## 关于jquery设计的一些思想和理念?but ...
- apache 配置多个虚拟主机
修改文件:httd.conf 文件地址:D:\wamp\bin\apache\Apache2.2.21\conf #配置虚拟主机<VirtualHost 127.0.0.3:80>Serv ...
- ASP.NET MVC学习笔记-----Bundles
在网页中,我们经常需要引用大量的javascript和css文件,在加上许多javascript库都包含debug版和经过压缩的release版(比如jquery),不仅麻烦还很容易引起混乱,所以AS ...
- 二分图最大匹配的König定理及其证明
二分图最大匹配的K?nig定理及其证明 本文将是这一系列里最短的一篇,因为我只打算把K?nig定理证了,其它的废话一概没有. 以下五个问题我可能会在以后的文章里说,如果你现在很想知道的话,网上 ...
- java工具类包
Hutool 提供丰富的java方法,其maven引用 <dependency> <groupId>com.xiaoleilu</groupId> <arti ...
- Highways(prim & MST)
Highways Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 23421 Accepted: 10826 Descri ...
- RHEL 6.0使用CentOS yum源
引言:由于RHEL的yum在线更新是收费的,如果没有注册的话是不能使用的,即不能在线安装软件.在这种情况下,想使用RHEL系统,还想用yum源来在线安装软件,有没有办法?答案是有办法,请往下看! 1. ...