Question

我做了一个快速的网页设计，有三个图像。

随着浏览器尺寸的减小，图片也会减少，所以它们都会保持可见的视觉效果。

现在我尝试将文字放在那些图像上，但是文本随着浏览器的大小调整而移动。

基本上，我希望文字始终保留在图片上的一个位置，因为图片尺寸会减小。

您会注意到图像上的文字不均匀，因为窗口非常小。尝试使窗口变大，文本将进入图像。我希望尽管浏览器大小，文本仍然存在。

以下是文字的CSS：

.imgText {
    display: inline-block; 
    text-align: center; 
    margin: 0; 
    padding: 250px 0 0 200px; 
    position: absolute;
    font-size: 25px;
    width: auto;
    height: auto;
    color:white;
}

Answer 1

这完全符合您的要求：http://jsfiddle.net/MrLister/JwGuR/10/

<div class="figure">
    <div class="figcaption">Text1</div>
    <img src="path/to/image">
</div>

（或者您可以使用真实的HTML5并使用实际的<figure>和<figcaption>元素。）

CSS：

.figure {
    position: relative;
    display: inline-block;
    max-width: 33%;
}

.figure .figcaption {
    text-align: center; 
    width:100%; height:0;
    font-size: 25px; line-height: 0;
    color:white;
    position:absolute; top:50%;
    z-index:1;
}

.figure img {
    display:block;
    max-width: 100%; 
}

如果需要，您还可以通过.figure元素float:left来丢失图像之间的空白。（并在之后做clear。）

尽管图像尺寸调整，图像上的文字仍保留在原位

1 个答案: