rwd仕上がりの目標。hoverすると、べた色が下から出てきて、文字の位置がセンターにくる。id="photo">の「background」に画像をレイアウトする。id="caption">の「background」に色ベタをレイアウトする。#photo、の中に(入れ子で)#captionを配置する。VHとは?opacity要素全体の不透明度。背景も、文字も透過になる。rgbargbaで設定できるのは、backgroundの不透明度のみ。16進数をrgbに変換する。100%;}.caption(=上にあるキャプションレイヤー)にrgbaで背景を指定する。class="caption">の背景色だけ不透明になる。class="photo">が少しだけ見えている。class="photo">に対して、幅と高さを100%に指定しておく。class="caption">のpadding-topを調節する。padding-topを使って、.captionの縦の長さを長くする。色べたの長さを長くする。最初は見せたくないボタンを隠すところがコツ。padding-topの分だけ、高さが伸びる。その分だけpositionで上げることができる。topの移動幅の最大値。(おまけ)文字が見にくいので、text-shadowを使う。absoluteを使って、最初の位置を規定する。topの値を「-(マイナス)」にして.captionの位置を上にあげる。移動できる最大量はpadding-bottomの値。xml:space="preserve"><!--svgタグをbodyの中にコピーwidth:とheight:を削除する。relative;/*子要素.captionのabsoluteを設定するため。月別アーカイブ検索はてなブログをはじめよう!ohta-felicaさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。