ボックスの中に帯付テキストを乗せる
ボックスの中に帯付テキストを画像の真ん中のほうに乗せる
テキスト
<div class="abox">
<div class="utilization-image-mdl">
<img src="・・・" alt="" width="240" height="240" class="alignnone size-full wp-image-3606" />
<div class="utilization-caption-mdl">テキスト</div>
</div><!-- utilization-image -->
</div>
<style>
.utilization-image-mdl {
min-width: 240px; /* 画像幅に合わせる */
max-width: 240px; /* 画像幅に合わせる */
position: relative; /* 相対位置 */
margin: 0 auto; /* 左右中央 */
}
.utilization-caption-mdl {
min-width: 240px; /* 画像幅に合わせる */
max-width: 240px; /* 画像幅に合わせる */
position: absolute;
color: #fff; /* 文字色 */
text-align: center; /* 文字位置 */
background: rgba(0, 0, 0, .6); /* 帯色 rgba(R,G,B,透過率) */
paddin: .5rem;
top: 50%;
left: 50%;
-ms-transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
</style>
ボックスの中に帯付テキストを画像の上のほうに乗せる
<div>
<figure class="utilization-image">
<img src="・・・" />
<figcaption class="utilization-caption">ボックスの中に帯付テキストを乗せる</figcaption>
</figure><!-- utilization-image -->
</div>
<style>
.utilization-image {
max-width: 296px; /* 画像幅に合わせる */
position: relative; /* 相対位置 */
margin: 0 auto; /* 左右中央 */
}
.utilization-caption {
color: #fff; /* 文字色 */
text-align: center; /* 文字位置 */
paddin: .5rem;
position: absolute;
background: rgba(0, 0, 0, .6); /* 帯色 rgba(R,G,B,透過率) */
top: 0; /* ポジション */
left: 0; /* 帯幅を合わせるため必要 */
right: 0; /* 帯幅を合わせるため必要 */
}
</style>
ボックスの中に帯付テキストを画像の下のほうに乗せる
<div>
<figure class="utilization-image-bottom">
<img src="・・・" />
<figcaption class="utilization-caption-bottom">ボックスの中に帯付テキストを乗せる</figcaption>
</figure><!-- utilization-image -->
</div>
<style>
.utilization-image-bottom {
max-width: 300px; /* 画像幅に合わせる */
position: relative; /* 相対位置 */
margin: 0 auto; /* 左右中央 */
}
.utilization-caption-bottom {
color: #fff; /* 文字色 */
text-align: center; /* 文字位置 */
paddin: .5rem;
position: absolute; /* 絶対位置 */
background: rgba(0, 0, 0, .6); /* 帯色 rgba(R,G,B,透過率) */
bottom: 0; /* ポジション bottom の場合 bottom の場合、上下位置の微調整が必要。上にあげるなら+ 下に下げるなら- */
left: 0; /* 帯幅を合わせるため必要 */
right: 0; /* 帯幅を合わせるため必要 */
line-height:1rem;
}
</style>
スポンサーリンク