回答編集履歴
2
よりよい解決策についての記述を追加
answer
CHANGED
|
@@ -1,5 +1,27 @@
|
|
|
1
|
-
背景
|
|
1
|
+
背景画像を扱う`background-xxx`系のプロパティは総じて**複数の値を設定できます**. そのため4つのPNG画像(青いラインを分割したものと, 更にその後ろの背景写真)を用意して, 適切に`background-position`, `background-size`, `background-repeat`値を定義すれば対処できます.
|
|
2
2
|
|
|
3
|
+
```CSS
|
|
4
|
+
body {
|
|
5
|
+
position: absolute;
|
|
6
|
+
background-image:
|
|
7
|
+
url(http://jsrun.it/assets/g/V/3/B/gV3BD),/*左可変画像*/
|
|
8
|
+
url(http://jsrun.it/assets/C/i/d/9/Cid9h),/*中央固定画像*/
|
|
9
|
+
url(http://jsrun.it/assets/q/U/3/q/qU3qI),/*右可変画像*/
|
|
10
|
+
url(http://jsrun.it/assets/G/z/m/x/GzmxO.png);
|
|
11
|
+
background-size: calc(50% - 100px) 200px,200px 200px,calc(50% - 100px) 200px,200px 200px;
|
|
12
|
+
background-repeat: no-repeat, no-repeat, no-repeat, repeat;
|
|
13
|
+
background-position: left top, center top, right top, left top;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
```
|
|
17
|
+
動作例
|
|
18
|
+
[http://jsdo.it/defghi1977/ezjI](http://jsdo.it/defghi1977/ezjI)
|
|
19
|
+
|
|
20
|
+
---
|
|
21
|
+
NOTE:以下はSVGを用いた別解です.
|
|
22
|
+
|
|
23
|
+
ここではレスポンシブなSVGを使った解決策を提示します.
|
|
24
|
+
|
|
3
25
|
```HTML
|
|
4
26
|
<!--背景画像とするSVG-->
|
|
5
27
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%">
|
|
@@ -25,9 +47,6 @@
|
|
|
25
47
|
動作例
|
|
26
48
|
[http://jsdo.it/defghi1977/4ZW5](http://jsdo.it/defghi1977/4ZW5)
|
|
27
49
|
|
|
28
|
-
NOTE:
|
|
29
|
-
`background-xxx`系のプロパティは総じて複数の値を設定できます. ですから, レスポンシブなSVGを用いずとも, 4つのPNG画像(青いラインを分割したものと, 更にその後ろの背景写真)を用意して, 適切に`background-position`, `background-size`, `background-repeat`値を定義すれば対処できます.
|
|
30
|
-
|
|
31
50
|
---
|
|
32
51
|
NOTE:
|
|
33
52
|
以下は`border-image`で解決できると早合点した際の名残です. 実際には画像の固定位置が中央部となるため, 本プロパティでは対処できません.
|
1
実際の解決策を提示
answer
CHANGED
|
@@ -1,3 +1,37 @@
|
|
|
1
|
+
背景に複数の画像を設定することで対処できます. ここではレスポンシブなSVGを使った解決策を提示します.
|
|
2
|
+
|
|
3
|
+
```HTML
|
|
4
|
+
<!--背景画像とするSVG-->
|
|
5
|
+
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%">
|
|
6
|
+
<svg x="50%" y="50%" overflow="visible">
|
|
7
|
+
<path d="M-2000,100H-100L100-100H2000" stroke-width="50" stroke="navy" fill="none"/>
|
|
8
|
+
</svg>
|
|
9
|
+
</svg>
|
|
10
|
+
```
|
|
11
|
+
```HTML
|
|
12
|
+
<div></div>
|
|
13
|
+
```
|
|
14
|
+
```CSS
|
|
15
|
+
div{
|
|
16
|
+
position: absolute;
|
|
17
|
+
top: 0;
|
|
18
|
+
left: 0;
|
|
19
|
+
width: 100%;
|
|
20
|
+
height: 100%;
|
|
21
|
+
background-image: url(responsive.svg), url(bg.jpg);
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
```
|
|
25
|
+
動作例
|
|
26
|
+
[http://jsdo.it/defghi1977/4ZW5](http://jsdo.it/defghi1977/4ZW5)
|
|
27
|
+
|
|
28
|
+
NOTE:
|
|
29
|
+
`background-xxx`系のプロパティは総じて複数の値を設定できます. ですから, レスポンシブなSVGを用いずとも, 4つのPNG画像(青いラインを分割したものと, 更にその後ろの背景写真)を用意して, 適切に`background-position`, `background-size`, `background-repeat`値を定義すれば対処できます.
|
|
30
|
+
|
|
31
|
+
---
|
|
32
|
+
NOTE:
|
|
33
|
+
以下は`border-image`で解決できると早合点した際の名残です. 実際には画像の固定位置が中央部となるため, 本プロパティでは対処できません.
|
|
34
|
+
|
|
1
35
|
CSSの`border-image`プロパティを使えば実現できるでしょう.
|
|
2
36
|
|
|
3
37
|
参考
|