背景圖片

時間 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>

仍是那句，才疏學淺，若有建議或者意見，望留言指正。瀏覽器

(●'◡'●)佈局

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。