2

3 つの画像を含む簡単な Web デザインを作成しました。

ブラウザーのサイズが小さくなると、画像も小さくなるため、すべてが目に見えるようになります。

これらの画像の上にテキストを配置しようとしましたが、ブラウザーのサイズ変更に伴ってテキストが移動します。

基本的に、画像のサイズが小さくなるにつれて、テキストは常に画像上の 1 つの場所にとどまるようにします。

これが 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 に答える