关于背景图片的处理

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

  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/cssref/pr_background-size.asp

  

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

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

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

 

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

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

  <div class="par">
    <div class="chil" style="background-image:url '('+后端处理的参数(该图片的URL)+')' ">
    </div>
  </div>

  在实际的业务中,需要在.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;
   }

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

  关于背景图片的处理

 

上一篇:冬季实战营第二期:Linux操作系统实战入门 学习报告


下一篇:Vue入门 HelloVue