移动端使用background添加背景图方法总结

最新推荐文章于 2025-04-11 07:03:46 发布

原创最新推荐文章于 2025-04-11 07:03:46 发布 · 7.2k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#移动端 #background

移动端专栏收录该内容

2 篇文章

订阅专栏

本文分享了在移动端网页设计中，如何使用CSS的background属性和background-size参数，使背景图片适应不同屏幕尺寸，保持良好的视觉效果。通过具体实例，展示了代码调整前后背景图的变化，适合初学者参考。

移动端使用background添加背景图方法总结

最近刚做完移动端的一个推广页面，里头的一部分内容需要用到css中的background来添加背景图。在实现的过程中，遇到了好多问题。由于移动设备有不通的屏幕尺寸，这就导致了在用background添加背景图片时会出现难以自适应的问题。再者背景图是根据内容进行变化的，内容有多高，背景图片就会有多高，随着屏幕尺寸的变化，背景图便会出现不同程度的拉伸和压缩，影响页面整体效果。
先看一组效果：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
    <title>移动端背景图片测试</title>
    <style>
        *{
            padding:0;
            margin:0;
        }
        .box{
        	height：700px;/*因为背景图需要高度撑起，这里设置一个高度*/
            background: url(images/test.png) no-repeat center center；
        }
        .box_content{
            visibility: hidden;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="box_content">
        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.
    </div>
</div>
</body>
</html>

iphone6和iphone5中显示效果：
在这里插入图片描述
可以看到背景图片是平铺在了屏幕之上，手机屏幕多大，就显示多大的区域。

画了个草图，简单理解一下：
在这里插入图片描述

解决办法：
添加一行代码：background-size:100% 100%;

.box{
            height:700px;
            background: url(images/test.png) no-repeat center center;
            background-size:100% 100%;
        }

看效果：
在这里插入图片描述