背景图片

时间 2020-02-06

标签背景图片繁體版

原文原文链接

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

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

<!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。移动开发中背景图片充满整个屏幕挺管用的。web

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

仍是那句，才疏学浅，若有建议或者意见，望留言指正。浏览器

(●'◡'●)布局