图像上文本的 CSS 定位错误

Question

我有一张带有position:absolute 的图片，所以我可以在上面放置position:relativetext。

到目前为止，一切都很好。唯一的问题是，文本显示在浏览器上角，而图像仍在加载中。在本地环境中我看不到这一点，但在现场环境中它变得很明显。

静态宽度/高度语句不是一个选项，因为整个页面都是响应式的。如何解决这个问题？当“那天晚些时候”加载 img 时，是否有另一种方法可以“大致”告诉文本应该停留在哪里？

Answer 1

您在问题中描述的内容有误。绝对元素应该在相对定位的父元素内。这允许绝对定位元素根据父元素定位自身。更好的方法是有一个相对父级，其元素是图像和文本。

演示： https://jsfiddle.net/lotusgodkk/qwLp9f9y/6/

HTML：

<div>
    <img src="http://de.fwsx.co/mbergs/images/home-header.jpg" />
    <span>Sample Text</span>
</div>

CSS：

div {
    position: relative;
    width: 400px;
}

div img {
    max-width: 100%;
}

div span {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    width: 100px;
    height: 20px;
    color: white;
    background: rgba(0, 0, 0, 0.4);
    text-align: center;
}

另一种选择是将图像设置为父级的background-image，然后定位文本。这样你就不必担心文本的位置了。

这是背景图片的演示： https://jsfiddle.net/lotusgodkk/qwLp9f9y/8/