Question

我的图片中有position:absolute，因此我可以在其上放置position:relative文字。

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

静态宽度/高度语句不是一个选项，因为整个页面都是响应式的。如何解决这个问题？是否还有另一种方式可以粗略地讲述文字＆＃39;在那天晚些时候它应该留在哪里＆＃39; 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/

CSS定位图像上的文本错误

1 个答案: