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

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

<!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

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

阅读更多
个人分类: 前端
上一篇ECharts属性设置
下一篇最全面的 Sublime Text 使用指南
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭