时间戳

首页 > 解决方案 > 为什么叠加的图片和标志+文字不起作用？

html - 为什么叠加的图片和标志+文字不起作用？

问题描述

我必须将徽标的分辨率更改为至少能够看到徽标（格式为 3400x1716）到 99x50 以重叠图片并添加带有徽标的文本。我将应该叠加的图片设置为 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>

标签： htmlcss

解决方案

您可以使用您开始使用的方法，即为您的父容器元素设置背景图像，然后您可以使用 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>

推荐阅读