2

私はこのコードを持っています:

HTML

<div id="wrapper">
  <div class="box">
    <img src="http://tukaki.pawlusmall.com/images/image1.png"/>
    <span class="caption">
        <p>caption</p>
    </span>
  </div>
  <div class="box">
    <img src="http://tukaki.pawlusmall.com/images/image2.png"/>
    <span class="caption">
        <p>caption</p>
    </span>
  </div>
  <div class="box"> 
    <img src="http://tukaki.pawlusmall.com/images/image3.png"/>
    <span class="caption">
        <p>caption</p>
    </span>
  </div>
</div>

CSS

.box {
    position: relative;
    width: 30%;
    height: auto;
    display: inline-block;
}

.box img {
    height: auto;
    width: 100%;
    position: absolute;
    left: 0;
}

.box span {
    position: absolute;
    width: 100%;
    height: auto;
    color: #FFF;
    left: 0;
    background-color: #FF0000;
}

ここで見つけることができます：

http://jsfiddle.net/v2Vk3/3/

キャプションを画像と同じ高さと幅にして、画像を重ねて、画像の自動サイズ変更を変更しないようにするだけです。

これを CSS で動作させる方法はありますか?

どうも

4

1 に答える 1

1

私はあなたがこれを求めていると思いますhttp://jsfiddle.net/6hgCj/

.box {
position: relative;
width: 30%;
height: auto;
display: inline-block;
}

.box img {
height: auto;
width: 100%;
}

.box span {
position: absolute;
width: 100%;
height: 100%;
color: #FFF;
left: 0;
top:0;
background-color: #FF0000;
}
于 2014-02-25T18:43:20.950 に答える