CSs3背景尺寸图片自适应
顺晟科技
2021-09-08 12:17:49
38
http://www.html5cn.com.cn/css3/2013-04-21/267.html
background-size属性和background-origin属性、background-clip属性一 样，也是CSS3对于background新增加的属性。它的作用是指定背景图片的大小，比如：对于一个div块，我们需要为它添加一张图片作为背景，然 而图片大小并非总能尽如人意，但我们又不想使用background-repeat属性让背景平铺，那么这时我们就可以使用background- size属性使图片放大或者是缩小来适应div块，当然这也可能会造成背景图的失真。
下面我们就先从它的语法说起吧：
background-size ：[ | | auto ]{1,2} | cover | contain ；
这 个属性有2个可选值，第1个值用于指定背景图的宽width，第2个值用于指定背景图的高height，如果只设定1个值，则第2个值默认为自动 auto。这两个值可取数字（单位为px）也可以取百分比，当指定为百分比时，大小会由所在区域的宽度、高度，以及background-origin的 位置决定，当然还可以通过cover和contain来对图片进行伸缩。
cover：用于等比放大背景图
contain：用于等比缩小背景图(背景图需大于块，否则背景图仍会被放大以适应块)
auto：默认值
下面我们就用实例来看一下它们的效果吧
首先看一下初始代码及效果
HTML代码：
CSS代码：
初始效果图：
1、background-size取固定值
CSS代码：
效果图：
2、background取百分比
CSS代码：
效果图：
3、background取cover
CSS代码：
效果图：
为了填满背景，此时是把原图等比放大了
4、background取contain
CSS代码：
效果图：
此时图片并没有缩小，反而被放大了，其实这是因为原背景图比div块小的原因，那么如果我们照一张大一点的图片，那么会是什么效果呢？现在拿一张比上面div块大的多的图片试一试，CSS代码是不变的，来看一下效果：
这时，背景图片被等比例缩小了，以适应div块。
5、background取auto
CSS代码：
效果图：
auto是默认值，这和初始效果是一样的，背景图片不做任何的放大或者是缩小。
好了，background-size属性就说这么多。- TAG：
- 自适应
- 图片
- background
-
17
2022-11
-
31
2022-10
-
24
2022-10
-
19
2022-10
-
15
2022-09
-
15
2022-09
- “html CSS”-自定义按钮样式[004]
- 每日CSS_纯CSS制作进度指示器
- 从0开始 学习3D视觉化的相机投影方式
- 用Jquery,CSS3实现GooglePlus那样的圆圈效果
- CSS通用标签摘要
- 6 共享web前端开发-css、js移动文章
- 全面面试每日3 1 3354个工作日873
- CSS中的光标鼠标指针光标样式(形状)
- 用css实现水平和垂直居中的10种方法
- jQ中CSS()和addClass之间的差异优先级
- css书写步骤
- CSS 表格、超链接强制换行
- Html,Css,Javascript及其他的注释方法详解
- 向PS添加ICO格式文件；Css引用字体文件
- 8个超震撼的HTML5和纯CSS3动画源码
- CSS制作华为mate8手机模型示例
- Hover.css：一组超实用的 CSS3 悬停效果和动画
- CSS 常见布局方式
- CSS样式规则及字体样式
- 前端 - CSS 实现自适应文本的头像_个人文章 - SegmentFault 思否