html背景和框如何居中显⽰图⽚，巧⽤background属性实现图
⽚居中
想必⼤家都常被页⾯居中这个问题困扰吧，这⾥简单分享⼀下⼀个使⽤background样式属性来实现图⽚居中的新⽤法。
很久以前本骚年常⽤load()这样的⽅式获取图⽚⼤⼩再进⾏调整，得到图⽚原⽐例居中的效果，⾃从发现这个新⽤法，就跟长长的js代码说拜拜了。
background
background简介
background是CSS简写属性，⽤来集中设置各种背景属性。
background可以⽤来设置⼀个或多个属性:
background-color, background-image,
background-position, background-repeat,
background-size, background-attachment,
等等。
具体⼤家可以上background | MDN上查看，⾥⾯有每个值的默认值、⽀持值、以及浏览器的兼容性等等，这⾥先对成员简单做些介绍。
background-color
CSS属性中的background-color会设置元素的背景⾊, 属性的值为颜⾊值或关键字”transparent”⼆者选其⼀。
background-image
CSS background-image属性⽤于为⼀个元素设置⼀个或者多个背景图像。
图像在绘制时，以z⽅向堆叠的⽅式进⾏。先指定的图像会在之后指定的图像上⾯绘制。因此指定的第⼀个图像最接近⽤户。
绘制层次关系如下：
元素的borders会在background-image之上被绘制
background-color会在background-image之下绘制
图像的绘制与盒⼦以及盒⼦的边框的关系，需要在CSS属性{cssxref(“background-clip”)}}和background-origin中定义，后⾯我们会讲到。
巧妙使⽤background-image除了可以拼接多图⽚，还可以结合渐变linear-gradient、透明度rgba()、重复⽅式background-repeat做出很棒的效果，具体可以参考使⽤CSS渐变 | MDN，效果图如下：
甚⾄是：
background-repeat
background-repeat CSS属性定义背景图像的重复⽅式。背景图像可以沿着⽔平轴，垂直轴，两个轴重复，或者根本不重复。
background-attachment
如果指定了background-image，那么background-attachment决定背景是在视⼝中固定的还是随包含它的区块滚动的。
background-position
background-position指定背景图⽚的初始位置。
对于每⼀个被设定的背景图⽚来说，background-position这个CSS属性设置了⼀个初始位置。 这个初始位置是相对于以background-origin定义的背景位置图层(padding-box|border-box|content-box)来说的，后⾯有讲。
关于该属性的取值，当然常⽤的center之外，像left|bottom|…等等，以及百分⽐percentage、甚⾄具体的值px等都是可以⽀持的。该属性⽐较简单常见，具体⼤家可以去background-position | MDN上查看。
background-clip
background-clip设置元素的背景(背景图⽚或颜⾊)是否延伸到边框下⾯
‘border-box’: 背景延伸到边框外沿(但是在边框之下)
‘padding-box’: 边框下⾯没有背景，即背景延伸到内边距外沿
‘content-box’: 背景裁剪到内容区(content-box)外沿
background-origin
background-origin规定了指定背景图⽚background-image属性的原点位置的背景相对区域
‘border-box’: 背景将会延伸到延伸到外边界的边框，⽽且是「边框在上、背景在下」
‘padding-box’: 背景描绘在padding盒⼦，边框⾥不会有背景出现。同样，背景将会延伸到最外边界的p
adding
‘content-box’: 背景描绘在内容区范围
background-clip与background-origin
这是两个很相似的CSS属性，前⾯也提到了⼏遍了，主要是⽤来设置背景与border/padding等关系的。
乍⼀看两者怎么都长⼀样，但是有个关键性的区别是：background-clip对多余内容进⾏裁剪，⽽background-origin则会调整位置保证效果。
background-size
background-size设置背景图⽚⼤⼩。
这个看起来很不起眼的属性，其实正是后⾯我们进⾏图⽚居中的关键。
除了基本的length值、percentage值，background-size还有⼏个很棒的值：
auto: 以背景图⽚的⽐例缩放背景图⽚。
cover: 缩放背景图⽚以完全覆盖背景区，可能背景图⽚部分看不见
contain: 缩放背景图⽚以完全装⼊背景区，可能背景区部分空⽩
背景区由前⾯提到的background-origin设置，默认为盒模型的内容区与内边距，也可设置为只有内容区，或者还包括边框。如果attachment为fixed，背景区为浏览器可视区(即视⼝)，不包括滚动条。不能为负值。
下⾯简单分享⼀下图⽚居中的很棒的⽅法。
图⽚居中新⽤法
组合使⽤background
图⽚居中
经过上⾯简单的讲解每个属性的效果，我们可以得到以下的⼀个样式设置：
.img-contain{
background-position: center;
background-size: contain;
background-repeat: no-repeat;
}
这样，不管
的宽⾼怎么设置，需要显⽰的图⽚都会按原⽐例⾃动缩放以全部刚好包含在
⾥⾯。
图⽚填充
如果需要背景图⽚按⽐例拉伸来占满
(不留⽩)，我们可以调整background-size：
.img-cover{
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}.
border和padding
如果有边框，我们可以配合background-clip或background-origin来使⽤，具体⾃⾏回放上⾯内容。
使⽤
我们可以这样使⽤：
聪明的你肯定发现了，这样的使⽤⽅法有个问题：
作为背景的图⽚是撑不起元素的，故这⾥我们需要给div⼿动添加宽⾼：
其实如果我们在页⾯内统⼀对每个模块(像这⾥的
)设置了宽⾼，这⾥的问题就不需要考虑的。
当然这样处理的话，有个⽐较不⽅便的地⽅就是，我们再也没办法右键下载和保存图⽚了。还有别忘了浏览器兼容，相信⼤家可以各种出招解决掉的。
代码实现
JS Bin
div{
width: 500px;
height: 300px;
border: solid 2px red;
background-color: white;
background-image: url('o905ne85q.bkt.clouddn/5df2bea83bbf3a90ca130c70.jpg')
}
.img-contain{
borderboxbackground-position: center;
background-size: contain;
background-repeat: no-repeat;
}
.img-cover{
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
图⽚居中
图⽚填充
具体效果如下：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。