在 div 中将图片居中放置在文本上方

7 浏览
0 Comments

在 div 中将图片居中放置在文本上方

我有一个带有一些"背景"文本的容器。

我想把一张图片居中放在这个容器上，并且覆盖在文本上方。

而不是文本覆盖在图片上方。

我想要实现的效果如下图所示，其中鞋子覆盖在Desrupt文本上方。

enter image description here

然而，我无法让图片在容器中居中。

我创建了这个示例来展示我的情况。

我应该如何创建与演示图片类似的效果？

理想情况下，企鹅的图片应该是其容器宽度的75%，而"什么是lorem"文本应该能够在容器中的位置，例如通过margin-top设置为20%（这样文本更可读，而不是完全隐藏在图片后面），而不影响图片的位置。

我的CSS代码如下：

/* 图片覆盖文本 */
.image-over-text {
    position: relative;
    width: 100%;
    height: auto;
}
.image-over-text p {
    color: #000;
    font-size: 4em;
    margin-top: 50%;
    margin-bottom: 50%;
    text-align: center;
    font-weight: 700;
    border: 1px solid green;
}
.image-over-text img {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 75%;
    height: auto;
    border: 1px solid red;
}

0

1 答案

0 Comments

问题的出现原因是没有给容器设置高度，导致容器的高度只有其内容的高度，而不包括图片的高度。解决方法是给容器添加height: 100%属性。这样，容器的高度将会占满整个父容器的高度，从而使得图片能够居中显示在文本上方。

0