Понимание компонентов на фоновом изображении - PullRequest
Новая
       36

Понимание компонентов на фоновом изображении

0 голосов
/ 02 июля 2019

Я создал простой вид входа в систему в Vue.js и BootstrapVue.Это всего лишь центрированная карта с парой полей ввода для имени пользователя и пароля, размещенных на изображении, являющемся фоном.

Проблема, с которой я сталкиваюсь, заключается в том, что пробел вокруг компонентов карты, кажется, занимаетна всю ширину экрана и стереть фон.

В конечном итоге я хочу добавить немного непрозрачности на карту, чтобы я мог видеть небольшое количество фона через карту.

Пример результата https://ibb.co/fMftd0L

Я пробовал то же самое, используя только чистую загрузку и обычный HTML, и у меня нет проблем. 

[<template>
    <b-container >
      <b-row align-h="center" class="mt-5" >
        <b-col cols="12" sm="8" md="6" lg="4" style="padding-top:10px;">
          <b-card header="Login" align="center" id="Card">    

            <b-form>              
              <b-form-group>
                <b-form-input                  
                  type="text"
                  required
                  placeholder="User Name">
                </b-form-input>
              </b-form-group>

              <b-form-group id="input-group-2" >
                <b-form-input
                  type="password"
                  required
                  placeholder="Password"
                ></b-form-input>
              </b-form-group>
              <b-button variant="outline-success" type="submit">Submit</b-button>
            </b-form>

          </b-card>
        </b-col>
      </b-row>
    </b-container>

</template>

<script>
  export default {
    data() {
      return {
        form: {
          password: '',
          name: ''         
        }
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>

html{
  background: url(../assets/10.jpg); /* Background image */
  height: 100%;
  width: 100%;
}

</style>][1]

Iхотел бы, чтобы карта отображалась поверх фонового изображения.

...