关于背景图片的处理

　　背景图片的处理主要的讲一下的属性

　　background-size: cover／contain;／／剪切以外面的容器大小为准开始剪切／／图片多大显示多大

　　background-position: center center; ／／显示中心
　　background-image: url(../img/lab-default-logo.png);／／背景图片的路径

　　background-size: length|percentage|cover|contain;

　　http://www.w3school.com.cn/c***ef/pr_background-size.asp

　　cover：把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。

　　　　　　背景图像的某些部分也许无法显示在背景定位区域中。

　　contain：把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。

　　在实际开发中，我们会遇到这样的一个问题，就是我们前端把页面搭建好，图片位置放置好后，并不是一成不变的，这些用于展示的图片，是根据用户的需要而不同的，因此用户在上传的时候，如果不按照我们既定的图片大小，代码处理不当，就会出现页面显示很不友好的情况。background-size：cover；background-position：center center；就会让图片从中心开始显示，如果过大，会按照容器的大小，将周围的内容剪切掉。而background-size：contain；就是上传的图片太小，会将其拉伸撑满容器，这种也会导致图片模糊的情况。

　这里展示出这样的一个例子：　　

　　在实际的业务中，需要在.chil做背景图片添加，为了用户体验，在添加的时候，由于网络等各种原因，添加的过程中，会有一定时间的延迟，这块区域可能是空白的区域，因此在添加显示的过程中，有一个默认的图片，提高用户体验度。

css 如下：

　.par {
　　background-image: url('../img/banner-placeholder.png');
　　background-size: cover;
　　background-position: center center;
　　height: 300px;
　　max-width:100%;
　}
.chil {
　　height: 100%;
　　background-size: cover;
　　background-position: center center;
}

下图：右边是经过后端上传的处理后的图片，右边是默认的父元素的默认背景图片（网络原因，有的图片有的图片是从数据库中获取的数据，因此会有延迟）

更多相关文章

随机推荐