Блог

Главная - Вопросы по программированию - Почему не работает наложенное изображение и логотип текст?

Почему не работает наложенное изображение и логотип текст?

#html #css

#HTML #css

Вопрос:

Мне пришлось изменить разрешение логотипа, чтобы по крайней мере можно было видеть логотип (формат 3400×1716) на 99×50 для перекрытия изображения и добавил текст с логотипом. Я установил для изображений, которые должны накладываться, высоту 300 и ширину 100%, чтобы заполнить остальную часть страницы, но это показано в моем коде. Конечным результатом будет то, что я смогу навести курсор на изображение / логотип, и появится текст.

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

Всего 12 картинок с 12 разными текстами, но с одним и тем же логотипом.

 .portfolio-items-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

.portfolio-item-wrapper {
    position: relative;
}

.portfolio-img-background {
    height: 300px;
    width: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.img-text-wrapper {
    position: absolute;
    top: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    text-align: center;
    padding-left: 100%;
    padding-right: 100%;
}  
 <div class="content-wrapper">
    <div class="portfolio-items-wrapper">
        <div class="portfolio-item-wrapper">
            <div class="portfolio-img-background" style="background- image:url(images/portfolio1.jpg)"></div>
            <div class="img-text-wrapper">
                <div class="logo-wrapper">
                    <img src="images/logos/thought.png">
                </div>
                <div class="subtitle">
                    Using a different approach than the NORM!
                </div>
            </div>
        </div>
        <div class="portfolio-item-wrapper">
            <div class="portfolio-img-background" style="background- image:url(images/portfolio2.jpg)"></div>

            <div class="img-text-wrapper">
                <div class="logo-wrapper">
                    <img src="images/logos/thought.png">
                </div>
                
                <div class="subtitle">
                    Everything starts with a THOUGHT!
                </div>
            </div>
        </div>
    </div>
</div>

Ответ №1:

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

 img {
  width:50px;height:50px;
}

div {
  background-image:url('https://static-cse.canva.com/image/1578/RoyalBlue_Set1_23.5dfc6872.png');
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center center;
  width:300px;height:300px;
  display:flex;align-items:center;flex-direction:column;justify-content:center;
  color:#FFF;font-size:36px;
}  
 <div>
  <img src="https://assets.codepen.io/5200861/internal/avatars/users/default.png">
  <h3>some text here</h3>
</div>