您现在的位置是：网站首页> 编程资料编程资料

css中background-size属性使用介绍CSS background全部汇总CSS的background属性及CSS3的背景图片设置总结CSS制作边框效果的技巧总结详解使用CSS固定页面背景图片位置的方法使用CSS3来实现滚动视差效果的教程CSS3属性background-size使用指南CSS背景background、background-position使用详解 CSS background 控制显示图片的一部分纯css实现元素下出现横线动画（background-image）

2021-09-06 748人已围观

简介 background-size可以设置2个值，第1个值用于指定背景图的width，第2个值用于指定背景图的height，不了解的朋友可以参考下

background-size的值类型：1个或2个值，这些值既可以是像素px，也可以是百分比%或auto，还可以是特定值cover, contain。

background-size可以设置2个值，1个为必填，1个为可选。
其中第1个值用于指定背景图的width，第2个值用于指定背景图的height，如果只给background-size设置1个值，则第2个值默认为auto高度自动 (通常默认高度是auto自动,自适用内容而增高,通常如果想高度自适应不用设置) （cover和contain特定值除外）。

复制代码

代码如下:

div{
background-image:url(test.png);
background-repeat:no-repeat;
background-size:100px;
}

等价于：

复制代码

代码如下:

div{
background-image:url(test.png);
background-repeat:no-repeat;
background-size:100px auto;
}

查看具体DEMO: background-size的值定义。当你使用firebug抓取到那个实例节点时，你会发现第二个值被自动加上了并且值为auto。当然，你也可以手动将第2个值设置为auto，然后与该DEMO的实例对比，它们的效果将是相同的。

background-size的特定值：

cover: 保持图像本身的宽高比例，将图片缩放到正好完全覆盖定义背景的区域；
contain: 保持图像本身的宽高比例，将图片缩放到宽度或高度正好适应定义背景的区域；
cover值：

复制代码

代码如下:

div{
background-image:url(test.png);
background-repeat:no-repeat;
background-size:cover;
}

上例，背景图片将覆盖整个div区域。查看具体DEMO: background-size:cover。

contain值：

复制代码

代码如下:

div{
background-image:url(test.png);
background-repeat:no-repeat;
background-size:contain;
}

上例，背景图将缩放到宽度或高度的任意一边与div区域适应。查看具体DEMO: background-size:contain。

上一篇：firefox中div+css的外层背景色不见的解决方法设置div背景透明的方法示例CSS实现div不设高度完全居中div自适应高度自动填充剩余高度详解DIV+CSS的命名规矩才能有利于SEO优化的实现方法DIV或者DIV里面的图片水平与垂直居中的方法详解如何用div实现自制滚动条div对齐与网页布局详解DIV+CSS实现电台列表设计的示例代码div+css实现带箭头的面包屑导航栏不定宽高的文字在div中垂直居中实现方法

下一篇：CSS 平级和儿子级样式写法示例CSS Transition通过改变Height实现展开收起元素从QQtabBar看css命名规范BEM的详细介绍css实现两栏布局，左侧固定宽，右侧自适应的多种方法CSS 实现Chrome标签栏的技巧CSS实现两列布局的N种方法CSS实现隐藏搜索框功能(动画正反向序列)CSS3中Animation实现简单的手指点击动画的示例详解CSS中的特指度和层叠问题详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)关于CSS浮动与取消浮动的问题