透明な div をその下に絶対に配置したい幅の広い画像があります。
<div class="background">
<img src="background.jpg" class="image">
<div class="box">
<p>paragraph</p>
</div>
</div>
CSS:
.background {
Position: relative;
}
.image {
width: 100%;
display: block;
}
.box {
background: #CC333F;
color: white;
position: absolute;
bottom: 0;
}
問題は、.box がインライン ブロックとして表示されているように見えることです。ページの使用可能な幅をすべて使用したいのですが、段落が終了する場所で終了します。