| 移动端使用background添加背景图方法总结 | 您所在的位置：网站首页 › 手机网页背景图片 › 移动端使用background添加背景图方法总结 |
移动端使用background添加背景图方法总结
|
移动端使用background添加背景图方法总结
最近刚做完移动端的一个推广页面，里头的一部分内容需要用到css中的background来添加背景图。在实现的过程中，遇到了好多问题。由于移动设备有不通的屏幕尺寸，这就导致了在用background添加背景图片时会出现难以自适应的问题。再者背景图是根据内容进行变化的，内容有多高，背景图片就会有多高，随着屏幕尺寸的变化，背景图便会出现不同程度的拉伸和压缩，影响页面整体效果。
先看一组效果：
移动端背景图片测试
*{
padding:0;
margin:0;
}
.box{
height：700px;/*因为背景图需要高度撑起，这里设置一个高度*/
background: url(images/test.png) no-repeat center center；
}
.box_content{
visibility: hidden;
}
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab, consequatur eaque eius est ipsa quia tempore veritatis!
Consequuntur cumque deleniti dignissimos,eius iusto maiores obcaecati qui rem repellat saepe voluptates.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab, consequatur eaque eius est ipsa quia tempore veritatis!
Consequuntur cumque deleniti dignissimos,eius iusto maiores obcaecati qui rem repellat saepe voluptates.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab, consequatur eaque eius est ipsa quia tempore veritatis!
Consequuntur cumque deleniti dignissimos,eius iusto maiores obcaecati qui rem repellat saepe voluptates.
iphone6和iphone5中显示效果： 画了个草图，简单理解一下： 解决办法： 添加一行代码：background-size:100% 100%; .box{ height:700px; background: url(images/test.png) no-repeat center center; background-size:100% 100%; }看效果： 可见，图片时适应在了内容区域以内，但是内容文字还是有所压缩的。一般来说，在实现这种含有文字页面时，我通常采用img标签添加图片，然后width:100%，这样在各种移动设备中均可以做到自适应。而在使用纯色稍微带些花纹的背景时，可以采用以上方法，实现背景对内容区域的自适应。 以上就是自己在做项目中的一点总结，还是个菜鸟，需要继续努力。 |
可以看到背景图片是平铺在了屏幕之上，手机屏幕多大，就显示多大的区域。
【本文地址】
公司简介
联系我们