apicloud3.0背景图片问题

龙毅257 · *发表于 2021-12-10 10:55:42*

为什么我在body里插入图片他会显示在底部，而不是body整体，这样写代码？
<!doctype html>
<html>

<head>
<meta charset="utf-8">
<meta name="viewport"
      content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width" />
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
<title>主页</title>
<link rel="stylesheet" type="text/css" href="./css/api.css" />
<link rel="stylesheet" type="text/css" href="./css/style.css" />
<link rel="stylesheet" type="text/css" href="./css/common.css" />
<link rel="stylesheet" type="text/css" href="./css/modifyNick.css" />
<style type="text/css">

      .wrap {
         display: -webkit-box;
         -webkit-box-orient: vertical;
         -webkit-flex-flow: column;
      }

      header {
         height: 44px;
         width: 100%;
         text-align: center;
         background-color: #250ef3;
         color: rgb(27, 12, 240);
         line-height: 44px;
         font-size: 20px;
      }

      .flex-1 {
         -webkit-box-flex: 1;
         -webkit-flex: 1;
      }

      footer {
         height: 30px;
         width: 100%;
         background-color: #ffffff;
         color: white;
         line-height: 30px;
         text-align: center;
      }

      .empty {
         text-align: center;
         padding: 120px 0;
      }

      header {
         background-color: #12e7cb;
      }

      header ul li {
         height: 50px;
         line-height: 50px;
         text-align: center;
         display: none;
         color: #323237;
         position: relative;
         font-size: 18px;
      }

      header ul li.active {
         display: block;
      }

      .flex-con {
         overflow: auto;
      }

#left{
border:1px solid #4390af; border-radius: 6px; background-color: #55abce;
display:block;
width:30%;
top: 40% auto;
text-align: center;
margin-top: 4px;
font-size: 18px;
padding: 1% 5%;
color:#ffffff;
cursor:pointer;
line-height:20px;
float:left;
}
#right{ border:1px solid #4390af; border-radius: 6px; background-color: #55abce;
display:block;
width:30%;
top: 40% auto;
text-align: center;
margin-top: 4px;
font-size: 18px;
padding: 1% 5%;
color:#ffffff;
cursor:pointer;
line-height:20px;
float:left;
float:right;
}
#frame{background-color: #ffffff;

}
</style>
</head>

<body>
<div id="wrap" class="flex-wrap flex-vertical">
      <header>
         <a>欢迎进入主页！</a>
         <h3>共享单车时空地图APP</h3>
      </header>

      <div id="frame">
      <div id="left" style="margin-top:450px;" tapmode="active" onclick="login()">登录</div>
      <div id="right" style="margin-top:450px;" tapmode="active" onclick="regis();">注册账号</div>
      </div>
      <div id="footer" class="border-t">

      </div>
</div>
</body>
<script type="text/javascript" src="./script/api.js"></script>
<script type="text/javascript" src="./script/vue.js"></script>
<script type="text/javascript" src="./script/common.js"></script>
<script type="text/javascript" src="./script/login.js"></script>
<script type="text/javascript">
apiready = function () {
      $api.fixStatusBar($api.dom('header'));
      api.setStatusBarStyle({
         style: 'dark',
         color: '#6ab494'
      });
      funIniGroup();
}

function funIniGroup() {
      var eHeaderLis = $api.domAll('header li'),
         frames = [];
      for (var i = 0, len = eHeaderLis.length; i < len; i++) {
         frames.push({
            name: 'frame' + i,
            url: '../html/frame' + i + '.html',
            bgColor: 'rgba(0,0,0,.2)',
            bounces: true
         })
      }
      api.openFrameGroup({
         name: 'group',
         scrollEnabled: false,
         rect: {
            x: 0,
            y: $api.dom('header').offsetHeight,
            w: api.winWidth,
            h: $api.dom('#main').offsetHeight
         },
         index: 0,
         frames: frames
      }, function (ret, err) {
      });
}

// 随意切换按钮
function randomSwitchBtn(tag) {
      if (tag == $api.dom('#footer li.active')) return;
      var eFootLis = $api.domAll('#footer li'),
         eHeaderLis = $api.domAll('header li'),
         index = 0;
      for (var i = 0, len = eFootLis.length; i < len; i++) {
         if (tag == eFootLis[i]) {
            index = i;
         } else {
            $api.removeCls(eFootLis[i], 'active');
            $api.removeCls(eHeaderLis[i], 'active');
         }
      }
      $api.addCls(eFootLis[index], 'active');
      $api.addCls(eHeaderLis[index], 'active');
      api.setFrameGroupIndex({
         name: 'group',
         index: index
      });
}
function login() {
      api.openWin({
         name: 'login',
         url: './html/login.html'
      })
}
function regis() {
      api.openWin({
         name: 'register',
         url: './html/register.html'
      })
}
</script>

</html>

技术咨询-F · 回复于2021-12-10 14:35:16

前面div 背景设置为透明，才能看到body的背景

龙毅257 · 回复于2021-12-10 19:02:03

怎么设置为透明

技术支持-F · 2021-12-10 14:35前面div 背景设置为透明，才能看到body的背景

[多端开发] apicloud3.0背景图片问题