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;
}

AI 代码解读

定义和用法

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/
目录
打赏
0
0
0
0
24
分享
相关文章
CSS基础-属性值单位:px, em, rem, %
【6月更文挑战第7天】本文探讨了CSS中四种关键的尺寸单位:像素(px)、相对单位(em)、rem和百分比(%)。px提供稳定显示但不适用于响应式设计;em根据上下文动态调整,但嵌套使用可能导致计算复杂;rem简化了嵌套计算,适合作为响应式设计的选择;%用于流体布局,但可能在复杂结构中引起不稳定。理解各单位特性并结合现代布局技术,能提升网页布局的美观性和用户体验。
144 3
使用CSS中的cursor属性值,常用的可设置参数,以及其他16中参数值的使用场景和示例代码
使用CSS中的cursor属性值,常用的可设置参数,以及其他16中参数值的使用场景和示例代码
189 0
rem的适配方案,css文件和js文件的引入方式,特色小边框的制作,DS-Digital.ttf数字展示屏的使用方法:,自适应图片 background-size,jQuery爆bug,a和盒子居中,
rem的适配方案,css文件和js文件的引入方式,特色小边框的制作,DS-Digital.ttf数字展示屏的使用方法:,自适应图片 background-size,jQuery爆bug,a和盒子居中,
【怒怼老乔】居然苹果手机IOS系统还不支持css3的transparent属性值,我去~~~~
【怒怼老乔】居然苹果手机IOS系统还不支持css3的transparent属性值,我去~~~~
CSS3 背景图片显示尺寸(放大/缩小背景图)(background-size) (背景适配 自适应)
CSS3 背景图片显示尺寸(放大/缩小背景图)(background-size) (背景适配 自适应)
113 0
css3的新属性 新增的颜色--- 透明度---两种渐变---定义多张背景图--background-size
css3的新属性 新增的颜色--- 透明度---两种渐变---定义多张背景图--background-size
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等