东莞市炜创包装制品有限公司 欢迎您! 公司主营"文件资料册/卡膜保护膜/卡夹卡册/文件袋/文件夹"

全屏背景图的实现及background的相关属性

今天需要做一个占满设备宽度的轮播图,这里作为demo仅展示一张图,下面分别是要操作的图片(这里做了缩放处理,实际的图比较大),以及要实现的效果图,很明显两者是不成比例的:

      (图一)                             (图二)

这里给定了宽,也就是设备宽度的100%,同时给定了高,比如这里设置为8.5rem (html的字体设为20px);

1. 首先我们考虑用img标签来放图片路径,可是这种方法是很难控制图片高度的,如果我们设置宽度100%,让高度自适应,那么实际的高度就有可能跟我们的容器高度不一样,如图一,很明显高度就小于实际的效果图

    如果我们设定了图片的宽100%,同时又设定图片的高是容器的100%,同样道理,要不然图片就会被拉长,也就是变形了,这样是非常不好的用户体验

 除非图片是跟容器成比例设计的,不然使用img标签是没法达到图二效果,可以看一下宽100%,高设置为容器设计的8.5rem的效果:

   (图三),很明显我们可以看到图片被拉高了......

 

2. 除了使用img标签,还有另一种方法,就是使用背景图的方式.这里先展示一下使用背景图实现的图片及代码:

    (图四) 

我们可以看到主要用到了background相关的属性来实现了效果图,可因为图片与容器不成比例,所以这里就会舍弃了图片两边的部分.

-------------------------------------------------这里是代码分割线 Begin ----------------------------------------------

<style>

  body {

    margin:0 ; /*这里只做简单的初始化*/

  }

  .xh-lxx-one-img {
    display: block;
    width: 100%;
    height: 8.5rem;
    line-height: 8.5rem;
    color: #333333;
    text-align: center;
    background: url(img/59662e5bNa454c17d.jpg) no-repeat;
    background-color: #DDDDDD;
    background-size: cover;
    background-position: center;
  }

</style>

html代码:

  <a class="xh-lxx-one-img">   <!--这里用a标签作为图片的容器,是因为考虑到真正运用到项目中会有链接跳转-->
    <span>BANNER单页</span>
  </a>

-----------------------------------------------------------------这里是代码分割线 End ---------------------------------------------------------------

background的定义和用法

background 简写属性在一个声明中设置所有的背景属性。

可以设置如下属性:

  • background-color                               设置背景颜色
  • background-position                           规定背景图片的位置
  • background-size                                 规定背景图片的尺寸
  • background-repeat                             规定如何重复背景图片
  • background-origin                               规定背景图片的定位区域
  • background-clip                                  规定背景图片的绘制区域
  • background-attachment                     规定背景图像是否固定或者随着页面的其余部分滚动
  • background-image                             规定要使用的背景图片

这里主要对图片定位background-position及尺寸background-size做总结:

background-position:

这个属性设置背景原图像(由background-image 定义)的位置,背景图像如果要重复,将从这一点开始。

提示:您需要把 background-attachment 属性设置为 "fixed",才能保证该属性在 Firefox 和 Opera 中正常工作。

可能的值:

  • top left   (默认值), top center , top right, center left , center center , center right , bottom left , bottom center ,  bottom right    如果您仅规定了一个关键词,那么第二个值将是"center"。
  • x% y%   第一个值是水平位置,第二个值是垂直位置。默认值:0% 0%。

  • xpos ypos    左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。

就拿本次demo来讲,这里用到了background-size:cover,所以填满了整个容器,在垂直方向是居中的,这里只要对水平方向做改变:

       默认值(top left),缺省了图片右边的内容                                     center(居中),缺省了两边的部分内容                                        right(右边对齐),缺省了左边的部分内容  


background-size:

可能的值:
length

设置背景图像的高度和宽度。

第一个值设置宽度,第二个值设置高度。

如果只设置一个值,则第二个值会被设置为 "auto"。

percentage

以父元素的百分比来设置背景图像的宽度和高度。

第一个值设置宽度,第二个值设置高度。

如果只设置一个值,则第二个值会被设置为 "auto"。

cover

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

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

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

 

 

 

 

 

 

 

 

 

 

 

 

前两个值都是需要手动输入具体的数值来规定背景图的大小,很容易理解

这里讲一下cover和contain两个值的不同效果,来看一下效果图(其他样式一样,仅改变该属性值):

                     cover(图片的某些部分不显示完整)                                                                            contain(图片完整显示,内容区域部分留白)

                                  

所以两者的区别是:

 cover: 背景图完全覆盖背景区域,图片的某些部分可能不显示完整  (简单来讲就是根据最短边来最大的适应背景区域)

 contain: 在内容区域保留图片的全部内容,内容区域可能不填满   (简单来讲就是根据最长边来最大的适应背景区域)

总结: 如果不能保证图片的宽高与所设计的容器成比例,那么就可以使用background-position:center和background-size:cover结合使图片居中填满容器.

 

posted @ 2017-07-26 15:28  会飞的小蜜蜂  阅读(1472)  评论(0编辑  收藏  举报
东莞市炜创包装制品有限公司 欢迎您! 公司主营"文件资料册/卡膜保护膜/卡夹卡册/文件袋/文件夹"