vue H5文本框定位到某个固定位置,背景全屏,适应所有屏幕(div大小变化时,背景与内容相对位置不改变)

性野喜悲

已于 2022-05-11 17:30:46 修改

阅读量1.9k

点赞数

分类专栏： vue 经验分享文章标签： vue.js javascript 前端

于 2020-11-24 16:05:32 首次发布

本文链接：https://blog.csdn.net/leng0920/article/details/110084898

版权

注意：要想物体在所有手机上显示的位置都一样，从一开始就要选择百分比定位

上下直接调整百分比（一定要用百分比）

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>VIP参会嘉宾邀请函生成链接</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.10/lib/index.css" />
  <style>
    #app {
      width: 100%;
      height: auto;
      position: relative;
    }

    .aa {
      width: 100%;
      height: auto;
    }

    .inputName {
      border: none;
      background: transparent;
      color: #ffffff;
      font-size: 65px;
      font-family: FZRUIZH_JW--GB1-0;
      position: absolute;
      top: 61.7%;
      left: 50%;
      transform: translateX(-50%);
      z-index: 5;
      text-align: center;
      outline: transparent;
      z-index: 1;
    }

    /* 去除placeholder默认样式 */
    .inputName::-webkit-input