回答編集履歴
2
修正
answer
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
JavaScript で行う場合、 `data-*` 属性へ画像の URL を入れておき、それを JavaScript で各要素の `background-image` プロパティへ設定することで実現出来ます ([動作
|
|
1
|
+
JavaScript で行う場合、 `data-*` 属性へ画像の URL を入れておき、それを JavaScript で各要素の `background-image` プロパティへ設定することで実現出来ます ([動作確認用リンク](https://jsfiddle.net/cjzn2Lgr/))。
|
|
2
2
|
|
|
3
3
|
```HTML
|
|
4
4
|
<div class="owl-controls">
|
|
@@ -27,7 +27,7 @@
|
|
|
27
27
|
}
|
|
28
28
|
```
|
|
29
29
|
|
|
30
|
-
または、画像の URL を含む [`url` 関数](https://drafts.csswg.org/css-values/#urls)を各要素の `style` 属性へカスタムプロパティとして指定することでも、質問者さんの実現したいことが行えます ([動作
|
|
30
|
+
または、画像の URL を含む [`url` 関数](https://drafts.csswg.org/css-values/#urls)を各要素の `style` 属性へカスタムプロパティとして指定することでも、質問者さんの実現したいことが行えます ([動作確認用リンク](https://jsfiddle.net/sp5rc2w8/))。
|
|
31
31
|
|
|
32
32
|
```HTML
|
|
33
33
|
<div class="owl-controls">
|
|
@@ -52,7 +52,7 @@
|
|
|
52
52
|
|
|
53
53
|
---
|
|
54
54
|
|
|
55
|
-
CSS Values and Units Level 3 によれば、 `attr` 関数を用いることで要素の属性の値を取得することが出来ます。そのため、これを用いるとすれば、以下のように `data-*` 属性と `attr` 関数を使い、より簡潔に質問者さんの実現したいことが行えます ([動作
|
|
55
|
+
CSS Values and Units Level 3 によれば、 `attr` 関数を用いることで要素の属性の値を取得することが出来ます。そのため、これを用いるとすれば、以下のように `data-*` 属性と `attr` 関数を使い、より簡潔に質問者さんの実現したいことが行えます ([動作確認用リンク](https://jsfiddle.net/e0kym7tr/))。しかし、動作確認用リンクを見るとわかるように、**[この機能に現在対応しているブラウザは存在しない](https://caniuse.com/#feat=css3-attr)**ため、現状は上記の二つのどちらかのような方法を選択することになります。
|
|
56
56
|
|
|
57
57
|
> ### [§ 9.2. Attribute References: attr()](https://drafts.csswg.org/css-values/#attr-notation)
|
|
58
58
|
> The attr() function is allowed as a component value in properties applied to an element or pseudo-element. It returns the value of an attribute on the element. If used on a pseudo-element, it returns the value of the attribute on the pseudo-element’s originating element.
|
1
修正
answer
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
JavaScript で行う場合、 `data-*` 属性へ画像の URL を入れておき、それを JavaScript で各要素の `background-image` プロパティ
|
|
1
|
+
JavaScript で行う場合、 `data-*` 属性へ画像の URL を入れておき、それを JavaScript で各要素の `background-image` プロパティへ設定することで実現出来ます ([動作用確認リンク](https://jsfiddle.net/cjzn2Lgr/))。
|
|
2
2
|
|
|
3
3
|
```HTML
|
|
4
4
|
<div class="owl-controls">
|
|
@@ -15,8 +15,8 @@
|
|
|
15
15
|
.owl-page {
|
|
16
16
|
flex: 1;
|
|
17
17
|
height: 50vh;
|
|
18
|
+
background-position: center;
|
|
18
19
|
background-size: 100px 100px;
|
|
19
|
-
background-position: center;
|
|
20
20
|
}
|
|
21
21
|
```
|
|
22
22
|
```JavaScript
|
|
@@ -27,7 +27,7 @@
|
|
|
27
27
|
}
|
|
28
28
|
```
|
|
29
29
|
|
|
30
|
-
または、画像の URL を含む `url` 関数を各要素の `style` 属性へカスタムプロパティとして指定することでも、質問者さんの実現したいことが行えます ([動作用確認リンク](https://jsfiddle.net/sp5rc2w8/))。
|
|
30
|
+
または、画像の URL を含む [`url` 関数](https://drafts.csswg.org/css-values/#urls)を各要素の `style` 属性へカスタムプロパティとして指定することでも、質問者さんの実現したいことが行えます ([動作用確認リンク](https://jsfiddle.net/sp5rc2w8/))。
|
|
31
31
|
|
|
32
32
|
```HTML
|
|
33
33
|
<div class="owl-controls">
|
|
@@ -44,15 +44,15 @@
|
|
|
44
44
|
.owl-page {
|
|
45
45
|
flex: 1;
|
|
46
46
|
height: 50vh;
|
|
47
|
+
background-image: var(--background);
|
|
48
|
+
background-position: center;
|
|
47
49
|
background-size: 100px 100px;
|
|
48
|
-
background-position: center;
|
|
49
|
-
background-image: var(--background);
|
|
50
50
|
}
|
|
51
51
|
```
|
|
52
52
|
|
|
53
53
|
---
|
|
54
54
|
|
|
55
|
-
CSS Values and Units Level 3 によれば、 `attr` 関数を用いることで要素の属性の値を取得することが出来ます。そのため、これを用いるとすれば、以下のように `data-*` 属性と `attr` 関数を使い、より簡潔に質問者さんの実現したいことが行えます ([動作用確認リンク](https://jsfiddle.net/e0kym7tr/))。しかし、動作確認用リンクを見るとわかるように、[この機能に現在対応しているブラウザは存在しない](https://caniuse.com/#feat=css3-attr)ため、現状は上記の二つのどちらかのような方法を選択することになります。
|
|
55
|
+
CSS Values and Units Level 3 によれば、 `attr` 関数を用いることで要素の属性の値を取得することが出来ます。そのため、これを用いるとすれば、以下のように `data-*` 属性と `attr` 関数を使い、より簡潔に質問者さんの実現したいことが行えます ([動作用確認リンク](https://jsfiddle.net/e0kym7tr/))。しかし、動作確認用リンクを見るとわかるように、**[この機能に現在対応しているブラウザは存在しない](https://caniuse.com/#feat=css3-attr)**ため、現状は上記の二つのどちらかのような方法を選択することになります。
|
|
56
56
|
|
|
57
57
|
> ### [§ 9.2. Attribute References: attr()](https://drafts.csswg.org/css-values/#attr-notation)
|
|
58
58
|
> The attr() function is allowed as a component value in properties applied to an element or pseudo-element. It returns the value of an attribute on the element. If used on a pseudo-element, it returns the value of the attribute on the pseudo-element’s originating element.
|
|
@@ -72,8 +72,8 @@
|
|
|
72
72
|
.owl-page {
|
|
73
73
|
flex: 1;
|
|
74
74
|
height: 50vh;
|
|
75
|
+
background-image: attr(data-image url);
|
|
76
|
+
background-position: center;
|
|
75
77
|
background-size: 100px 100px;
|
|
76
|
-
background-position: center;
|
|
77
|
-
background-image: attr(data-image url);
|
|
78
78
|
}
|
|
79
79
|
```
|