Как изменить непрозрачность этой карты Bootstrap 4, не влияя на форму и кнопки внутри нее?

Question

Я пытаюсь использовать эту форму входа Bootstrap 4.

https://startbootstrap.com/snippets/login/

Я пытаюсь выяснить, как решить эти 2 проблемы.

1. Я пытаюсь изменить непрозрачность .card-signin, но когда я изменяю, это также влияет на форму и кнопки.Как изменить непрозрачность только для карты, а не для элементов внутри нее?
2. Как я могу расположить эту карту по центру экрана по вертикали?Это показывает в верхней части, а я пробовал разные комбинации с вертикальным выравниванием?

Answer 1

" Как я могу центрировать эту карту по центру экрана по вертикали? Она отображается сверху, когда я пробовал разные комбинации с выравниванием по вертикали? " Важно!Вертикальный центр относительно высоты родительского элемента

Если родительский элемент элемента, который вы пытаетесь отцентрировать, не имеет определенной высоты, ни одно из решений для вертикального центрирования не будет работать!

Теперь на вертикальномцентрирование в Bootstrap 4 ...

Вы можете использовать новые утилиты flexbox & size, чтобы сделать контейнер в полный рост и отобразить: flex.Эти параметры не требуют дополнительного CSS (за исключением того, что высота контейнера (то есть: html, body) должна быть 100%).

Опция 1 align-self-center на flexbox child

<div class="container d-flex h-100">
<div class="row justify-content-center align-self-center">
 I'm vertically centered
</div>

введите описание ссылки здесь

Вариант 2 align-items-centre на родительском элементе flexbox (отображается символ .row: flex; flex-direction: row)

<div class="container h-100">
<div class="row align-items-center h-100">
    <div class="col-6 mx-auto">
        <div class="jumbotron">
            I'm vertically centered
        </div>
    </div>
</div>

введите описание ссылки здесь

Вариант 3контент-центр на родительском модуле flexbox (карта. display: flex; направление flex: столбец)

<div class="container h-100">
<div class="row align-items-center h-100">
    <div class="col-6 mx-auto">
        <div class="card h-100 border-primary justify-content-center">
            <div>
                ...card content...
            </div>
        </div>
    </div>
</div>

введите описание ссылки здесь

Answer 2

Добавьте ниже CSS и все готово ...

html,body,.container,.row {
    height: 100%;
}
.col-sm-9.col-md-7.col-lg-5.mx-auto {
    align-items: center;
    display: flex;
}
.card.card-signin.my-5 {
    background-color: rgba(255, 255, 255, 0.6);
}

Answer 3

Попробуйте ниже css.

.card {
    background-color: rgba(255,255,255, 0.2) !important;
}

Answer 4

Вместо использования непрозрачности вы можете попробовать следующий стиль.

.card-body {
    background: rgba(255, 252, 252, 0.09);
}