#css フルースクリンの背景画像と透けるログイン画面

  • bootstrap-vue 使用
  • フル画面背景
  • 透けるログイン画面
  • 簡単 CSS でできる

#js

<template>
  <div>
    <img src="/bg.jpg" id="full-screen" class="overflow-hidden" />
    <center>
      <b-card class="my-login">
        <b-form-group label="ID" label-for="loginID" label-class="text-left">
          <b-form-input v-model="payload.customer_code" required id="loginID" />
        </b-form-group>
        <b-form-group label="Password" label-for="loginPW" label-class="text-left">
          <b-form-input type="password" v-model="payload.mypage_pass" required id="loginPW" />
        </b-form-group>
        <div>
          <b-button
            @click.prevent="submitForm"
            :disabled="processing"
            :class="{'animated shake':error}"
            variant="primary"
          >ログイン</b-button>
        </div>
      </b-card>
    </center>
    <b-img class="content p-1" src="/logo.png" fluid-grow />
  </div>
</template>

#css

#full-screen {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
}
.my-login,
.my-login input {
  background-color: rgba(255, 255, 255, 0.5) !important;
}
.my-login {
  max-width: 320px;
  width: 100%;
  position: fixed;
  left: 50%;
  transform: translate(-50%, -50%);
  bottom: 150px;
}
.content {
  position: fixed;
  bottom: 0;
  max-width: 258px;
}
2019-07-23
  • css