CSS3 background-size 属性值:cover

简介: 当设置值为cover,可以呈现出图片铺满浏览器内容的视觉效果     实例 规定背景图像的尺寸: div { background:url(img_flwr.gif); background-size:80px 60px; background-repeat:no-repeat; } 定义和用法 background-size 属性规定背景图像的尺寸。

当设置值为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 把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。 测试
如何联系我:【万里虎】www.bravetiger.cn 【QQ】3396726884 (咨询问题100元起,帮助解决问题500元起) 【博客】http://www.cnblogs.com/kenshinobiy/
目录
相关文章
|
4月前
|
iOS开发
【怒怼老乔】居然苹果手机IOS系统还不支持css3的transparent属性值,我去~~~~
【怒怼老乔】居然苹果手机IOS系统还不支持css3的transparent属性值,我去~~~~
|
5月前
CSS3 背景图片显示尺寸(放大/缩小背景图)(background-size) (背景适配 自适应)
CSS3 背景图片显示尺寸(放大/缩小背景图)(background-size) (背景适配 自适应)
|
前端开发
css:通过html给css传递颜色属性值
css:通过html给css传递颜色属性值
137 0
css:通过html给css传递颜色属性值
css3的新属性 新增的颜色--- 透明度---两种渐变---定义多张背景图--background-size
css3的新属性 新增的颜色--- 透明度---两种渐变---定义多张背景图--background-size
|
前端开发 JavaScript
jquery的css()函数同时设置多个css属性值
jquery的css()函数同时设置多个css属性值
102 0
|
前端开发
SAP Spartacus cx-split-view几个css属性值的逻辑依赖关系
SAP Spartacus cx-split-view几个css属性值的逻辑依赖关系
SAP Spartacus cx-split-view几个css属性值的逻辑依赖关系
|
前端开发 流计算 容器
css属性列表 和 属性值含义
HTML 标签 可以对同一个 元素应用 class 或 id 属性,但是更常见的情况是只应用其中一种。这两者的主要差异是,class 用于元素组(类似的元素,或者可以理解为某一类元素),而 id 用于标识单独的唯一的元素。
958 0
|
7天前
|
前端开发 JavaScript 开发工具
【HTML/CSS】入门导学篇
【HTML/CSS】入门导学篇
17 0