1

3 列に 12 枚の画像のグリッド ビューを作成し、それぞれの下部にテキスト ボックス オーバーレイを作成しようとしています。テキストボックスを上に配置しようとするまで、グリッドは完全に機能していました。テキスト付きのボックスは画像の子にする必要があると感じていますが、その方法がわかりません。

私は現在、最初の画像にクラスを適用して、他の画像に移動する前にそれを機能させようとしています。また、テキストをボックスの中央に揃えようとすると問題が発生します。誰かがこれらの問題のいずれか/両方で私を助けることができれば、それは大歓迎です!

これは私のcssです：

section{
width: 940px;   
min-height: 400px;
margin: 0 auto;
padding: 10px 0 0 0;    
}

.grid-large {
margin: 16px 0 0 16px;
float: left;
}

.transbox {
height: 50px;
width: 300px;
margin-top: -50px;
background-color:#362e26;
opacity:0.8;
filter:alpha(opacity=80); /* For IE8 and earlier */
}

.category-label{
color: #fff;
margin: 0;
margin-left: 15px;
margin-top: 5px;
vertical-align: middle;
}

.first {
margin-left: 0;
}

そして私のhtml：

<section>
<img src="./images/gowns.jpg" width ="300" height="300" class="grid-large.first">
<div class="transbox">
<p class="category-label">wedding gowns</p> 
</div>
<img src="./images/bridesmaid.jpg" width ="300" height="300" class="grid-large">
<img src="./images/menswear.jpg" width ="300" height="300" class="grid-large">

<img src="./images/venues.jpg" width ="300" height="300" class="grid-large.first">
<img src="./images/planners.jpg" width ="300" height="300" class="grid-large">
<img src="./images/photographers.jpg" width ="300" height="300" class="grid-large">
</section>
4

2 に答える 2

1

画像の上にdivを配置しようとするのではなく、テキストラベルを含める必要があるdivの背景画像に画像を作成します。背景画像を持つ div 内に、テキストを含む新しい div を追加して、画像上の任意の場所に配置できます。

このようなもの：

<div id="picturegrid">
    <div id="gowns">
        <p>Wedding gowns<p>
    </div>
</div>

と

#gowns { 
background: center transparent url(./images/gowns.jpg) no-repeat; 
}

このリンクも役立つかもしれません: http://web.enavu.com/tutorials/making-image-overlay-caption-using-css/

于 2013-08-19T00:58:29.183 に答える