2

我做了一个包含三张图片的快速网页设计。

随着浏览器尺寸的减小，图片也会减小，因此它们都保持可见。

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

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

这是 JSFIDDLE：http: //jsfiddle.net/JwGuR/

您会注意到文本甚至不在图像上，因为窗口很小。尝试使窗口更大，文本将进入图像。尽管浏览器大小，我希望文本保持原位。

这是文本的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;
}
4

1 回答 1

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之后）。

于 2013-05-19T21:20:48.233 回答