https://news.yahoo.co.jp/feature/298
こちらのサイトのように画像を横幅一杯にして、文字を挿入する表示方法を教えてください。
【yahooの該当部分ソース】
<div class="headImage">
<div class="headCover">
<div class="thumbnail" style="background-image:url(https://giwiz-tpc.c.yimg.jp/q/tpc/images/story/2016/12/27/_1482790072_1482790063_22.jpg)"></div>
<p class="headInfo source">
</p>
<div class="headInnr">
<h1>子どもの貧困「見えにくい」現実</h1>
<p class="headInfo time">1/31(火) 18:29 配信</p>
</div><!-- /.headinnr -->
</div><!-- /.headCover -->
</div><!-- /.headImage -->
画像はこちら
https://giwiz-tpc.c.yimg.jp/q/tpc/images/story/2016/12/27/_1482790072_1482790063_22.jpg
サイズは1500x1000でした。
全く同様のものをつくりたいのですが、どのようにCSSで構築したらいいのでしょうか？
No.1
4973
2154
200pt
「全く同様」という微妙な表現ですが、エッセンスを抽出してみました。
<!DOCTYPE html> <html lang="ja"> <head> <style> #x { width: 100%; height: auto; position: relative; background-position: 50% 50%; background-repeat: no-repeat; background-size: cover; background-image: url(https://giwiz-tpc.c.yimg.jp/q/tpc/images/story/2016/12/27/_1482790072_1482790063_22.jpg); border: 2px solid orange; } #x::after { padding-top: 41.43%; /* ★1 画像の縦方向のサイズを調節 */ content: ""; display: block; } .y { position: absolute; bottom: 0; color: white; /* ★2 文字の見た目 */ width: 100%; } .z { position: relative; text-align: center; /* ★2 文字の見た目 */ } </style> </head> <body> <div class="z"> <div id="x"></div> <div class="y"> <h1>子供の貧困「見えにくい」現実</h1> </div> </div> </body> </html>
「画像を表示する要素と、文字を表示する要素を重ねて表示する」というところが質問の主題なのだと解釈しました。
class="z" の要素の幅いっぱいに合わせて画像を表示して、その中に文字を表示します。
画像は、縦方向で見切れています。
縦方向のサイズを指定して、それっぽくしているだけです（★1）。
CSS の background 系では、見た目の大きさは、あくまでも、それを抱えている要素の大きさなので、画像の全体を表示したいのであれば、background-image ではなく img タグを使うべきところだと思います。
★2は、重ねた文字の領域をどう表示するかなので、好きにしたらええやん、という部分です。
元ページでも、微妙な感じでタイトルに改行が入りますし。
正直なところ、文字の背景に画像を表示するなら、別の要素に指定するんじゃなくて、
<div> <!-- ここに、css で背景画像の指定 --> <h1>子供の貧困「見えにくい」現実</h1> ... </div>
という方が、HTML 的に素直だろう、という気がします。
2
1
1
1
1
55
53
ありがとうございます。
指定されたソースで完全にできました。
最終的にはシンプルに考えて、以下の様にしました。
htmlのdivで画像をstyle指定しているのはそれぞれのページにおいてどの画像を使用しているのかわかりやすくするため。
.bx { position: relative; clear:both; text-align:center; } .bx h1 { width: 100%; position: absolute; color:#FFF; text-align:center; top: 80%; left: 50%; margin-left: -50%; } .bx .img_bx { width: 100%; height: auto; position: relative; background-position: 50% 50%; background-repeat: no-repeat; background-size: cover; border: 2px solid orange; } .bx .img_bx::after { padding-top: 41.43%; content: ""; display: block;} <div class="bx"> <div class="img_bx" style="background-image: url(https://giwiz-tpc.c.yimg.jp/q/tpc/images/story/2016/12/27/_1482790072_1482790063_22.jpg);"></div> <h1>子供の貧困「見えにくい」現実</h1> </div>2017/11/23 22:14:42