Bootstrap карточка с заголовком в полупрозрачной рамке поверх изображения - PullRequest
Новая
       21

Bootstrap карточка с заголовком в полупрозрачной рамке поверх изображения

0 голосов
/ 13 июля 2020

Я хочу создать карточку bootstrap, где заголовок находится в полупрозрачной рамке поверх изображения, а остальная часть карточки выглядит как обычная карточка bootstrap. Это мой код: 

<style>
.box{
    position: relative;
    /*display: inline-block; /* Make the width of box same as image */
}
.box .text{
    position: absolute;
    z-index: 999;
    margin: 0 auto;
    left: 0;
    right: 0;        
    text-align: center;
    align-items:center;
    justify-content:center;
    top: 40%; /* Adjust this value to move the positioned div up and down */
    background: rgba(178, 0, 0, 0.8);
    font-family: Arial,sans-serif;
    color: #fff;
    width: 100%; /* Set the width of the positioned div */
    height: 10%;
}
</style>
<div class="container">
        <div class="card img-fluid" style="width:500px">
            <img class="card-img-top" src="img/green.jpg" alt="Card image" style="width:100%">
            <div class="card-img-overlay box">
                <h4 class="card-title text">Title</h4>
            </div>
            <p class="card-text">Some example text some example text. Some example text some example text. Some example text some example text. Some example text some example text.</p>
            <a href="#" class="btn btn-danger">Learn more</a>
        </div>
    </div>

Вот как он выглядит: enter image description here

My issue with my code is that this red box containing the card title isn't responsive. It spans not just over the image, but over the entire card. How do I change it so that the red box is at the bottom of the image? I've already tried to change the css "top" and added a "bottom", but since the text is not over the image but over the whole card, it doesn't work.

I want the result to look like this: enter image description here

The red box containing the card title should always stay on the bottom of the image, no matter the screen size.

UPDATE

This is how it looks like after including the code below.

введите описание изображения здесь

1 Ответ

0 голосов
/ 13 июля 2020

Переместите элемент .card-img-overlay вокруг изображения и заголовка следующим образом 

<div class="card-img-overlay box">
    <img class="card-img-top" src="img/green.jpg" alt="Card image" style="width:100%">
    <h4 class="card-title text">Title</h4>
</div>

И затем присвойте заголовку следующий вид css

.box {
    position: relative;
}
.box .text {
    position: absolute;
    z-index: 999;     
    text-align: center;
    bottom: 0;
    left: 0;
    background: rgba(178, 0, 0, 0.8);
    font-family: Arial,sans-serif;
    color: #fff;
    width: 100%; /* Set the width of the positioned div */
    height: 10%;
}

I ' м почти уверен, что это даст желаемый результат

...