目次
サンプル
画像の下部にテキストを重ねて表示する場合は以下の様に行います。CSSのみの設定で可能です。
オーバーレイする文字をこの段落に記述すると表示されます。グループで指定しているので、グループ内の画像や他の段落なども表示します。
ブロック構成
親を「container」として子に「content」として入れ子の関係を各グループをもたせて指定しています。
| ブロック | 項目 | 設定値 |
|---|---|---|
| グループ | 追加CSSクラス | container |
| ＞画像 | ||
| ＞グループ | 追加CSSクラス | content |
| ＞＞段落 |
グループを入れ子で指定する場合は、「リストビュー」にしてリスト側を選択してグループ化すると指定ミスが減らせます。
CSSの設定
.container {
position: relative;
margin: 0 auto; /* Center it */
}
.container .content {
position: absolute; /* Position the background text */
bottom: 0; /* At the bottom. Use top:0 to append it to the top */
background: rgba(0, 0, 0, 0.5); /* Black background with 0.5 opacity */
color: #f1f1f1; /* Grey text */
width: 100%; /* Full width */
padding: 20px; /* Some padding */
}background: rgba(0, 0, 0, 0.5);background:の0.5部分が透明化の値になり、小さくすれば透明度が下ります。
参考サイト
この記事は以下のサイトを参考にしてブロックテーマに対応させる方法を紹介しています。
