响应式布局插入整张背景图(手机端适用)

最新推荐文章于 2023-06-20 16:33:18 发布

Mars辰晨

最新推荐文章于 2023-06-20 16:33:18 发布

阅读量2.1k

点赞数

分类专栏：前端文章标签：响应式布局背景图移动端自适应

本文链接：https://blog.csdn.net/Revered_Mars/article/details/79973408

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

之前做手机端页面需要插完整的一张背景图,插入之后,分辨率改变,底部或右侧会出现白边的问题。现找到解决办法，不说别的，上代码。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <!-- Bootstrap 
     <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
     <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
     <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
     -->

      <style>
        *{
            margin: 0;
            padding: 0;
        }
        body {
            background: url(images/sybg.jpg) no-repeat center center fixed;
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
        }

    </style>
	<title>Document</title>
</head>

<body>
	<div class="container">
		//页面内容部分
	</div>
	
</body>
</html>

图片地址： http://jianlis.coolwei.com/sv/wx/images/sybg.jpg

图片以背景形式插入,宽度高度自适应,铺满屏幕

Mars辰晨

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
响应式布局插入整张背景图(手机端适用)

之前做手机端页面需要插完整的一张背景图,插入之后,分辨率改变,底部或右侧会出现白边的问题。现找到解决办法，不说别的，上代码。&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta http-equiv="X-UA-Compatible&quo
复制链接

扫一扫

专栏目录