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

最新推荐文章于 2022-11-01 17:09:55 发布

anmi7832

最新推荐文章于 2022-11-01 17:09:55 发布

阅读量149

点赞数

原文链接：http://www.cnblogs.com/stella1024/p/7239014.html

版权

今天需要做一个占满设备宽度的轮播图,这里作为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"> 
　　　　<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	把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。