Hapicode

# 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

関連記事

CSS リセットのカスタマイズ

CSSリセット方法とカスタマイズ方法について紹介します。...

Tailwindcss でローディングコンポーネント作成

Tailwind css使って next.jsのグローバルローディングをカスタマイズする話...

Nuxt Fontawesome アイコン使う

Font Awesome 特徴と使い方、Nuxtjs Vuejs で Font Awesome使う方...

シェアボタン SNS ソーシャルリンクの作り方

Facebook TwitterなどのSNSに記事をシェアするためのシェアボタンについて...

CSS ::-webkit-scrollbar スクロールバーをカスタマイズ

webkit系scrollbarカスタマイズ CSS 疑似要素 webkit-scrollbarにつ...

sass-loader エラー

sassエラー対応とsassをオンラインにcssに変換するツール...

CSS background と conic-gradient で bookmark のブックマーク作る

画像使わずにcssブックマークをスタイルシートのbackgroundとconic-gradientで...

HTML 特殊文字エンティティ参照

よく使うhtml特集文字の文字実体参照と10 進数コードエンティティ参照...

html5 新タグ要素と廃止タグ要素

2008年に発表されたHTML5の規則をもとに、新しいタグ要素と機能及び廃止する機能タグなどをまとめ...

safari でボタンタップしたら影が残る怪奇現象

safariでタップしたボタンの影跡が残る現象の解決方法...

css 学習 タイピング風アニメーションを css だけでやってみる

Jqueryなし！javascriptなし！CSSだけでタイピング風アニメーションは憧れでやってみま...

google color palette

google color paletteが用意してくれているから、センスなくてもきれいに配色できる...

フルスクリーン背景画像の 100%表示と iPhone 対応方法

フルスクリーン画像表示をやってみました iphone 対応も...

placeholder text-align プレースホルダーの左寄せ・右寄せ

inputのplaceholder内文字左寄せあるいは右寄せ方法、placeholderにtext-...

margin 上下効かない原因
CSS :before & :after pseudo-elements 疑似要素で画像を重ねる

css画像重ねる効果がほしかったので、cssで画像回転しながらbefore afterで工夫やってみ...