@@ -157,55 +157,6 @@ Image References: the ''url()'' notation {#url-notation}
157157 ██████ ██ ██ ███████ ██████ ██████ ██ ██ ██ ████████ ████████ ███ ███
158158-->
159159
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-
209160
210161<!--
211162 ██████ ████████ ███ ████████ ████ ████████ ██ ██ ████████ ██████
0 commit comments