图像上的文字定位错误

我有一个图像有position:absolute，所以我可以放置一个position:relative文本。图像上的文字定位错误

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

静态宽度/高度语句不是一个选项，因为整个页面都是响应式的。如何解决这个问题？有没有另一种方式来告诉文本'大致'它是应该留在'img被加载后'当天晚些时候？

2015-12-30 Bernhard Prange

你在问题中描述的内容做错了。一个绝对元素应该位于一个相对定位的父元素中。这允许绝对定位的元素根据父亲定位自己。更好的方法是有一个相对父母，其元素是图像和文字。

演示：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/

来源

2015-12-30 11:05:07

对不起，我被搞乱的东西。请seee编辑。我的问题是，虽然图像仍在加载，但浏览器还没有（现在）存在with/height值。我只需要加载图像的工作量。实际的位置工作正常。 –

@BernhardPrange相信我，其他一些问题正在等着你解决。因为这种方法不适合你所尝试的。它在本地环境中工作的原因是图像存在于本地，无需加载时间。在部署时，需要花费时间来加载图像。那是事情搞糟的时候。 –

@K K我到目前为止已经弄清楚了这一点。那么什么是正确的方法呢？正如我告诉你的那样 - 我之前没有测量过，因为它全部响应。 –

图像上的文字定位错误

回答

相关问题