移动Web背景图适配-优快云博客

2019独角兽企业重金招聘Python工程师标准>>>

很多时候，在移动Web页面中，我们都只需要在里面输入手机号码和验证码，但是页面的内容又不可以让用户觉得太单薄。所以一个好的背景图片就可以让内容丰富起来，但是怎么让背景图片在不同的移动终端下都有良好的伸展呢？哈哈哈，说的太多，再次哈哈哈。下面就是我的方法，仅记录并提供参考，如有需要改正，欢迎指正，欢迎吐槽。

Demo one : 很简单，可或者对于你来说，很实用。PC上的布局用这一套效果明显。

<!DOCTYPE HTML>
<html>
<head>
<title></title>
  <meta http-equiv="content-type"content="text/html; charset=UTF-8"/>
  <style type="text/css">
  .content {
    width:800px;
	height:800px;
    /* 最外层div */
    background-color:#f3f0d9; /* 这里的颜色设置最好设置相近的颜色 */
	margin:0px auto;
	}

  .content-one{
    /* 宽和高和最外层是一样的 */
    width:100%;
	height:100%;

	margin:0 auto;
	background: url("./coupon_mid_autumn_get_success.png") no-repeat fixed top;
  }
  </style>
</head>
<body>
  <div class="content">
	<div class="content-one"></div>
  </div>
</body>
</html>

Demo two : 完全填充，不管怎么拉伸都是填充。注意：width-max是980。移动开发中背景图片充满整个屏幕挺管用的。

<!DOCTYPE HTML>
<html>
<head>
<title></title>
  <meta http-equiv="content-type"content="text/html; charset=UTF-8"/>
  <style type="text/css">
  .content {
    /* 外层div */
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    max-width: 980px;
    margin: 0 auto;
    /* 当内容超出盒子范围时，也会出现滚动条 */
    overflow: auto;
    /* 用来设置在IOS浏览器的容器内滚动是否开启惯性和回弹的 */
    -webkit-overflow-scrolling: touch;
    background-color: red;
	}

  .content-one{
    /* 宽和高和最外层是一样的 */
    width:100%;
	height:100%;
	background: url("./bg_mid_autumn.png") no-repeat left top;
	/* 背景图片适应手机屏幕大小 这里是重点*/
	max-width: 100%;
    background-size:cover;
    background-size:100% 100%;
  }
  </style>
</head>
<body>
  <div class="content">
	<div class="content-one"></div>
  </div>
</body>
</html>

还是那句，才疏学浅，如有建议或者意见，望留言指正。

(●'◡'●)

转载于:https://my.oschina.net/u/2870138/blog/782547