1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
|
---
title: background-attachment
slug: Web/CSS/background-attachment
tags:
- CSS
- CSS Background
- CSS Property
- Reference
translation_of: Web/CSS/background-attachment
---
<div>{{CSSRef}}</div>
<p><strong><code>background-attachment</code></strong> 這個 <a href="/en-US/docs/CSS">CSS</a> 屬性能夠設定，背景圖片的位置是否要固定在 {{glossary("viewport")}}（視圖）上，還是背景圖片會隨著它的 containing block（外層容器）一起滾動。</p>
<div>{{EmbedInteractiveExample("pages/css/background-attachment.html")}}</div>
<h2 id="Syntax" name="Syntax">語法</h2>
<pre class="brush: css no-line-numbers">/* Keyword values */
background-attachment: scroll;
background-attachment: fixed;
background-attachment: local;
/* Global values */
background-attachment: inherit;
background-attachment: initial;
background-attachment: unset;
</pre>
<p><code>background-attachment</code> 屬性的值，可以是下方清單中的其中之一。</p>
<h3 id="Values">Values</h3>
<dl>
<dt><code>fixed</code></dt>
<dd>讓背景相對於 viewport（視圖）的移動是固定的。即便元素中的內容是可滾動的，背景也不會在滾動元素內容時跟著移動。(這個屬性與 {{cssxref("background-clip", "background-clip: text", "#text")}} 不相容。)</dd>
<dt><code>local</code></dt>
<dd>讓背景相對於元素的內容是固定的，且背景在滾動元素的內容時會跟著移動。另外，背景的繪製與定位區域是相對於元素的可滾動區域，而不是包裹著它們的邊框。</dd>
<dt><code>scroll</code></dt>
<dd>讓背景相對於元素本身是固定的，使背景在滾動元素的內容時不會跟著移動。（It is effectively attached to the element's border.）</dd>
</dl>
<h3 id="Formal_syntax">Formal syntax</h3>
<pre class="syntaxbox">{{csssyntax}}
</pre>
<h2 id="Examples" name="Examples">例子</h2>
<h3 id="Simple_example">Simple example</h3>
<h4 id="HTML">HTML</h4>
<pre class="brush: html"><p>
There were doors all round the hall, but they were all locked; and when
Alice had been all the way down one side and up the other, trying every
door, she walked sadly down the middle, wondering how she was ever to
get out again.
</p></pre>
<h4 id="CSS">CSS</h4>
<pre class="brush:css; highlight:[3];">p {
background-image: url("https://mdn.mozillademos.org/files/12057/starsolid.gif");
background-attachment: fixed;
}
</pre>
<h4 id="Result">Result</h4>
<p>{{EmbedLiveSample("Simple_example")}}</p>
<h3 id="Multiple_background_images">Multiple background images</h3>
<p>這個屬性支援多個背景圖片。你可以對每個背景設定不同的 <code><attachment></code>。每個背景圖片會依序對應在 <code><attachment></code> 設定的類型。</p>
<h4 id="HTML_2">HTML</h4>
<pre class="brush: html"><p>
There were doors all round the hall, but they were all locked; and when
Alice had been all the way down one side and up the other, trying every
door, she walked sadly down the middle, wondering how she was ever to
get out again.
Suddenly she came upon a little three-legged table, all made of solid
glass; there was nothing on it except a tiny golden key, and Alice's
first thought was that it might belong to one of the doors of the hall;
but, alas! either the locks were too large, or the key was too small,
but at any rate it would not open any of them. However, on the second
time round, she came upon a low curtain she had not noticed before, and
behind it was a little door about fifteen inches high: she tried the
little golden key in the lock, and to her great delight it fitted!
</p></pre>
<h4 id="CSS_2">CSS</h4>
<pre class="brush:css; highlight:[3];">p {
background-image: url("https://mdn.mozillademos.org/files/12057/starsolid.gif"),
url("https://mdn.mozillademos.org/files/12059/startransparent.gif");
background-attachment: fixed, scroll;
background-repeat: no-repeat, repeat-y;
}</pre>
<h4 id="Result_2">Result</h4>
<p>{{EmbedLiveSample("Multiple_background_images")}}</p>
<h2 id="Specifications">Specifications</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS3 Backgrounds', '#the-background-attachment', 'background-attachment')}}</td>
<td>{{Spec2('CSS3 Backgrounds')}}</td>
<td>The shorthand property has been extended to support multiple backgrounds and the <code>local</code> value.</td>
</tr>
<tr>
<td>{{SpecName('CSS2.1', 'colors.html#propdef-background-attachment', 'background-attachment')}}</td>
<td>{{Spec2('CSS2.1')}}</td>
<td>No significant change.</td>
</tr>
<tr>
<td>{{SpecName('CSS1', '#background-attachment', 'background-attachment')}}</td>
<td>{{Spec2('CSS1')}}</td>
<td>No significant change.</td>
</tr>
</tbody>
</table>
<p>{{cssinfo}}</p>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<p>{{Compat("css.properties.background-attachment")}}</p>
<h2 id="See_also">See also</h2>
<ul>
<li><a href="/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds">Using multiple backgrounds</a></li>
</ul>
|
