@@ -157,55 +157,6 @@ Image References: the ''url()'' notation {#url-notation}
157
157
██████ ██ ██ ███████ ██████ ██████ ██ ██ ██ ████████ ████████ ███ ███
158
158
-->
159
159
160
- Combining images: the ''cross-fade()'' notation {#cross-fade-function}
161
- ----------------------------------------------------------------------
162
-
163
- When transitioning between images,
164
- CSS requires a way to explicitly refer to the intermediate image
165
- that is a combination of the start and end images.
166
- This is accomplished with the ''cross-fade()'' function,
167
- which indicates the two images to be combined
168
- and how far along in the transition the combination is.
169
-
170
- Note: Authors can also use the ''cross-fade()'' function for many simple image manipulations,
171
- such as tinting an image with a solid color
172
- or highlighting a particular area of the page by combining an image with a radial gradient.
173
-
174
- The syntax for ''cross-fade()'' is defined as:
175
-
176
- <pre class=prod>
177
- <dfn caniuse="css-cross-fade">cross-fade()</dfn> = cross-fade( <<cf-mixing-image>> , <<cf-final-image>> ? )
178
- <dfn><cf-mixing-image></dfn> = <<percentage>> ? && <<image>>
179
- <dfn><cf-final-image></dfn> = <<image>> | <<color>>
180
- </pre>
181
-
182
- The function represents an image generated by
183
- combining two images.
184
-
185
- The <<percentage>> represents how much of the first image is retained
186
- when it is blended with the second image.
187
- The <<percentage>> must be between ''0%'' and ''100%'' inclusive;
188
- any other value is invalid.
189
- If omitted,
190
- it defaults to the value ''50%'' .
191
-
192
- If the last argument is a <<color>> ,
193
- it represents a solid-color image with the same intrinsic dimensions as the first image.
194
- If omitted,
195
- it defaults to the color ''transparent'' .
196
-
197
- More precisely,
198
- given ''cross-fade(<var>p</var> <var>A</var>, <var>B</var>)'' ,
199
- where <var> A</var> and <var> B</var> are images
200
- and <var> p</var> is a percentage between 0% and 100%,
201
- the function represents an image
202
- with width equal to <code> width<sub> A</sub> × <var> p</var> + width<sub> B</sub> × (1-<var> p</var> )</code>
203
- and height equal to <code> height<sub> A</sub> × <var> p</var> + height<sub> B</sub> × (1-<var> p</var> )</code> .
204
- The contents of the image must be constructed by
205
- first scaling <var> A</var> and <var> B</var> to the size of the generated image,
206
- then applying <code> dissolve(<var> A</var> ,<var> p</var> ) plus dissolve(<var> B</var> ,1-<var> p</var> )</code> .
207
- The "dissolve()" function and "plus" compositing operator are defined in the literature by Porter-Duff. [[PORTERDUFF]]
208
-
209
160
210
161
<!--
211
162
██████ ████████ ███ ████████ ████ ████████ ██ ██ ████████ ██████
0 commit comments