全屏背景图的实现及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结合使图片居中填满容器.