# 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

関連記事

Nuxt Fontawesome アイコン使う
シェアボタン SNS ソーシャルリンクの作り方
CSS ::-webkit-scrollbar スクロールバーをカスタマイズ
sass-loader エラー
CSS background と conic-gradient で bookmark のブックマーク作る
HTML 特殊文字エンティティ参照
html5 新タグ要素と廃止タグ要素
safari でボタンタップしたら影が残る怪奇現象
css 学習 タイピング風アニメーションを css だけでやってみる
google color palette
フルスクリーン背景画像の 100%表示と iPhone 対応方法
placeholder text-align プレースホルダーの左寄せ・右寄せ
margin 上下効かない原因
CSS :before & :after pseudo-elements 疑似要素で画像を重ねる