画像の上に文字列を表示する方法 – いつか誰かの役に立つかもしれないweb制作屋の備忘録CSSのpositionプロパティを使用して画像の上に文字列を重ねて表示する方法を示します。おまけとしてアニメーション機能を使用して文字列をスクロールさせます。重ねることにより文字の内容や位置の変更にも早く対応できて良いですね。 1.画像の上に文字列を表示する CSSの設定は、画像は「position:relative;」にして、文字列は「position: absolute;」とします。文字列はtop、bottom、left、right等を使用して位置を調整します。 サンプルでは写真の下の方に文字列を表示します。文字列のバックグランドに半透明の黒い帯を表示させます。 HTMLのサンプルソース <div class="photo"> <img src="image.jpg" /> <p class="text">きれいな風景を見て、ちょっと一息</p> </div> CSSのサンプルソース
