移动端背景图

时间 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 "在这里输入图片标题")