回答編集履歴
2
文法の修正
answer
CHANGED
|
@@ -8,7 +8,8 @@
|
|
|
8
8
|
|
|
9
9
|
あとは、テキストが丁度いい位置に表示されるように`.bgImg`に対して`padding`を調整してあげれば完成。
|
|
10
10
|
|
|
11
|
+
この方法だと装飾用に余計なタグ要素を追加する必要が無く、シンプル＆スマートに実装できるかとおもいます。
|
|
11
|
-
親要素の幅にかかわらず可変するのでレスポンシブにも対応してい
|
|
12
|
+
また、親要素の幅にかかわらず可変するのでレスポンシブにも対応しています。
|
|
12
13
|
|
|
13
14
|
|
|
14
15
|
|
1
文法修正
answer
CHANGED
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
`position`と`before`の組み合わせでどうでしょうか。
|
|
2
2
|
|
|
3
|
-
背景画像が敷かれたBOXを`div.bgImg`とした場合に、
|
|
3
|
+
まず、背景画像が敷かれたBOXを`div.bgImg`とした場合に、
|
|
4
|
-
`.bgImg`自体を`position:relative`でポジションの起点とし
|
|
4
|
+
`.bgImg`自体を`position:relative`でポジションの起点とします。
|
|
5
|
-
`.bgImg:before`の疑似要素に`border`をを付けたうえで、
|
|
6
|
-
`position:absolute`で浮かせて、`top` `right` `bottom` `left`を使って`.bgImg`が持つ最外枠からのピクセル数を指定することで、画像の内側に枠をつけます。
|
|
7
5
|
|
|
6
|
+
次に、`.bgImg:before`の疑似要素に`border`で枠線をつけて、
|
|
7
|
+
`position:absolute`、`top` `right` `bottom` `left`を使って`.bgImg`が持つ最外枠からのピクセル数を指定することで、画像の内側に枠をつけます。
|
|
8
|
+
|
|
8
9
|
あとは、テキストが丁度いい位置に表示されるように`.bgImg`に対して`padding`を調整してあげれば完成。
|
|
9
10
|
|
|
10
11
|
親要素の幅にかかわらず可変するのでレスポンシブにも対応しているかと思います。
|