-
ID:E4vgUo さんの質問

見出しから背景画像がはみ出るようにすることは可能でしょうか?

イメージとしては見出しバーがあって、その見出しバーの先頭に
人のような画像がひょこんと載っているという感じです。


■-------見出し--------

こういったものを作る場合はcssのbackground-imageではなく、
htmlの方でimgタグを見出しのところにいれてあげて、
cssでposition調整をするしかないのでしょうか?

または、そもそも見出しの縦幅を飛び出る画像分、余分に取ってあげて、
テキストが表示される位置をcssの方で下の方に調整してあげるとか???

みんなの回答 4 件

ID:1/RPa7 さんの回答

ヒント:ネガティブマージン、擬似要素でゴニョゴニョ

ID:E4vgUo

ttp://h2ham.net/add-icon-after-and-middle

これでいけますかね?

ID:tMhxVi

ためしてみりゃいーじゃん

ID:1/RPa7

できるよ

ID:8blEBB さんの回答

imgタグよりは擬似要素に人物指定してあげて、position指定でbottom:0のほうがアウトライン的にも良いと思う。

ID:EeWeBx さんの回答

装飾的な問題よりも先に、構造的な問題から解決したほうがいいよ。
その見出しと自分物画像の関係、もっと分かりやすく言えば、Googleなどの検索結果にその画像の情報を含めるかどうか。
見出しに対して、ただのリストマーク的な扱いの場合は、検索結果に関与する必要がないので擬似要素や背景画像で代替できる。
画像を情報として検索結果に伝えるべき場合は、figureとかでセマンティックに構造化する必要があるよね。その場合は、親要素に対して、position:absoluteで位置調整するだけかな。

ID:nC5ewQ さんの回答

遅くなりましたが、無事、対応できました。ありがとうございました!

最終更新日:2014-08-26 (10,192 views)

関連するトピックス

ページ上部に戻る