• 关于背景图片的处理


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

      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-100%;
     }
      .chil {
      height: 100%;
      background-size: cover;
      background-position: center center;
       }

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

      

  • 相关阅读:
    [js高手之路] html5新增的定时器requestAnimationFrame实战进度条
    [js高手之路] html5 canvas系列教程
    [js高手之路] html5 canvas系列教程
    [js高手之路] html5 canvas系列教程
    [js高手之路] html5 canvas系列教程
    [js高手之路] html5 canvas系列教程
    [js高手之路] html5 canvas系列教程
    [js高手之路] html5 canvas系列教程
    [js高手之路] html5 canvas系列教程
    [js高手之路] html5 canvas系列教程
  • 原文地址:https://www.cnblogs.com/adouwt/p/6890627.html
Copyright © 2020-2023  润新知