移動端背景圖

時間 2019-11-12

標籤移動背景欄目無線简体版

原文原文鏈接

background-attachment :定義背景圖片隨滾動軸的移動方式css

取值: scroll | fixed | inherithtml

scroll: 隨着頁面的滾動軸背景圖片將移動web

fixed: 隨着頁面的滾動軸背景圖片不會移動app

inherit: 繼承初始值: scrollui

繼承性: 否url

適用於: 全部元素.net

給移動端頁面添加背景圖：code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1" />
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta content="telephone=no, email=no" name="format-detection">
<meta http-equiv="pragma" content="no-cache">

<link rel="stylesheet" href="css/common.css">
<link rel="stylesheet" href="css/page.css">

<title>分享紅包</title>
<style>
html{ overflow-x:hidden;}
body{ overflow-x:hidden;}
</style>
</head>

<body style="background: url(images/red_envelopes_bg.jpg) fixed  no-repeat; background-size: 100% 100%">

<div class="red_envelopes">
    <img src="images/red_envelopes.png" width="100%" alt="">
    <p><font>88</font>元紅包</p>
</div>
<input class="envelopes_input" type="text" placeholder="請輸入手機號碼" />
<div class="envelopes_btn" >當即註冊</div>
</body>
</html>```

background-position:表示背景圖片的位置

background-size：表示背景圖片的大小

 這裏fixed能夠保證圖片縱向鋪滿整個頁面且不隨頁面的滑動而滑動

效果如圖：

![輸入圖片說明](https://static.oschina.net/uploads/img/201610/10103310_kecf.png "在這裏輸入圖片標題")

相關標籤/搜索

每日一句

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