この翻訳は不完全です。英語から この記事を翻訳 してください。

CSS の cross-fade() 関数は、2枚以上の画像を所定の透過度で合成するために使用することができます。これは単色で色を薄めたり、放射状グラデーションとの組み合わせでページの特定の領域を強調させたりするような、数多くの単純な画像加工に使用することができます。

重要: 現在の構文と実装は様々です。仕様書上の構文を最初に説明し、現在の実相をその後にこの記事の下で説明します。

仕様書上の構文

cross-fade() 関数は、画像と、他の画像と合成したときにそれぞれの画像が占める割合を定義したパーセント値のリストを取ります。パーセント値は引用符なしで記述し、 “%” 記号を含め、 0% から 100% までの間である必要があります。

この関数は CSS の中で、通常の画像の参照が利用できるところならばどこでも利用できます。

Cross-fade のパーセント値

Think of the percentage as an opacity value for each image. This means a value of 0% means the image is fully transparent while a value of 100% makes the image fully opaque.

cross-fade( url(white.png) 0%, url(black.png) 100%); /* fully black */
cross-fade( url(white.png) 25%, url(black.png) 75%); /* 25% white, 75% black */
cross-fade( url(white.png) 50%, url(black.png) 50%); /* 50% white, 50% black */
cross-fade( url(white.png) 75%, url(black.png) 25%); /* 75% white, 25% black */
cross-fade( url(white.png) 100%, url(black.png) 0%); /* fully white */
cross-fade( url(green.png) 75%, url(red.png) 75%); /* both green and red at 75% */

If any percentages are omitted, all the specified percentages are summed together and subtracted from 100%. If the result is greater than 0%, the result is then divided equally between all images with omitted percentages.

In the simplest case, two images are faded between each other. To do that, only one of the images needs to have a percentage, the other one will be faded accordingly. For example, a value of 0% defined for the first image yields only the second image, while 100% yields only the first. A 25% value renders the first image at 25% and the second at 75%. The 75% value is the inverse, showing the first image at 75% and the second at 25%.

The above could also have been written as:

cross-fade( url(white.png) 0%,   url(black.png)); /* fully black */
cross-fade( url(white.png) 25%,  url(black.png)); /* 25% white, 75% black */
cross-fade( url(white.png),      url(black.png)); /* 50% white, 50% black */
cross-fade( url(white.png) 75%,  url(black.png)); /* 75% white, 25% black */
cross-fade( url(white.png) 100%, url(black.png)); /* fully white */
cross-fade( url(green.png) 75%, url(red.png) 75%); /* both green and red at 75% */

If no percentages are declared, both the images will be 50% opaque, with a cross-fade rendering as an even merge of both images. The 50%/50% example seen above did not need to have the percentages listed, as when a percentage value is omitted, the included percentages are added together and subtracted from 100%. The result, if greater than 0, is then divided equally between all images with omitted percentages.

In the last example, the sum of both percentages is not 100%, and therefore both images include their respective opacities.

If no percentages are declared and three images are included, each image will be 33.33% opaque. The two following are lines (almost) identical:

cross-fade( url(red.png), url(yellow.png), url(blue.png)); /* all three will be 33.3333% opaque */
cross-fade( url(red.png) 33.33%, url(yellow.png) 33.33%, url(blue.png) 33.33%); 

形式文法

cross-fade( <cf-mixing-image> , <cf-final-image>? )

where
<cf-mixing-image> = <percentage>? && <image>
<cf-final-image> = <image> | <color>

where
<image> = <url> | <image()> | <image-set()> | <element()> | <cross-fade()> | <gradient>
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>

where
<image()> = image( <image-tags>? [ <image-src>? , <color>? ]! )
<image-set()> = image-set( <image-set-option># )
<element()> = element( <id-selector> )
<cross-fade()> = cross-fade( <cf-mixing-image> , <cf-final-image>? )
<gradient> = <linear-gradient()> | <repeating-linear-gradient()> | <radial-gradient()> | <repeating-radial-gradient() <a="" href="/ja/docs/CSS/Value_definition_syntax#Single_bar" title="Single bar: exactly one of the entities must be present">| <conic-gradient()>
<rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )
<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )
<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )
<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )</repeating-radial-gradient()>

where
<image-tags> = ltr | rtl
<image-src> = <url> | <string>
<image-set-option> = [ <image> | <string> ] <resolution>
<id-selector> = <hash-token>
<linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )
<repeating-linear-gradient()> = repeating-linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )
<radial-gradient()> = radial-gradient( [ <ending-shape> || <size> ]? [ at <position> ]? , <color-stop-list> )
<conic-gradient()> = conic-gradient( [ from <angle> ]? [ at <position> ]?, <angular-color-stop-list> )
<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>

where
<side-or-corner> = [ left | right ] || [ top | bottom ]
<color-stop-list> = [ <linear-color-stop> [, <linear-color-hint>]? ]# , <linear-color-stop>
<ending-shape> = circle | ellipse
<size> = closest-side | farthest-side | closest-corner | farthest-corner | <length> | <length-percentage>{2}
<position> = [ [ left | center | right ] || [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]
<angular-color-stop-list> = [ <angular-color-stop> [, <angular-color-hint>]? ]# , <angular-color-stop>

where
<linear-color-stop> = <color> && <color-stop-length>
<linear-color-hint> = <length-percentage>
<length-percentage> = <length> | <percentage>
<angular-color-stop> = <color> && <color-stop-angle>?
<angular-color-hint> = <angle-percentage>

where
<color-stop-length> = <length-percentage>{1,2}
<color-stop-angle> = <angle-percentage>{1,2}
<angle-percentage> = <angle> | <percentage>

HTML

<div id="div"></div>

CSS

#div {
    width: 300px;
    height: 300px;
    background-image: cross-fade(
        75% url('https://mdn.mozillademos.org/files/8543/br.png'),
        url('https://mdn.mozillademos.org/files/8545/tr.png'));
}

古い実装による構文

cross-fade( <image, <image>, <percentage> )

The specification for the cross-fade() function allows for multiple images and for each image to have transparency values independent of the other values. This was not always the case. The original syntax, which has been implemented in some browsers, only allowed for two images, with the sum of the transparency of those two images being exactly 100%. The original syntax is supported in Safari and supported with the -webkit- prefix in Chrome, Opera, and other blink-based browsers.

cross-fade(url(white.png), url(black.png), 0%);   /* fully black */
cross-fade(url(white.png), url(black.png), 25%);  /* 25% white, 75% black */
cross-fade(url(white.png), url(black.png), 50%);  /* 50% white, 50% black */
cross-fade(url(white.png), url(black.png), 75%);  /* 75% white, 25% black */
cross-fade(url(white.png), url(black.png), 100%); /* fully white */

In the implemented syntax, the two comma-separated images are declared first, followed by a comma and required percent value. Omitting the comma or percent invalidates the value. The percent is the opacity of the first declared image. The included percentage is subtracted from 100%, with the difference being the opacity of the second image.

The green/red example (with the percentages totalling 150%) and the yellow/red/blue example (with three images) from the specification syntax section, are not possible in this implementation.

古い構文の例

HTML

<div class="crossfade"></div>

CSS

.crossfade {
    width: 300px;
    height: 300px; 
    background-image: -webkit-cross-fade( 
        url('https://mdn.mozillademos.org/files/8543/br.png'), 
        url('https://mdn.mozillademos.org/files/8545/tr.png'),
        75%);
    background-image: cross-fade(
        url('https://mdn.mozillademos.org/files/8543/br.png'),
        url('https://mdn.mozillademos.org/files/8545/tr.png'),
        75%);
}

アクセシビリティの考慮事項

Assistive technology cannot parse background images. If the image contains information critical to understanding the page's overall purpose, it is better to describe it semantically in the document. When using background images, make sure the contrast in color is great enough that any text is legible over the image as well as if the images is missing.

仕様書

仕様書 状態 備考
CSS Images Module Level 4
cross-fade() の定義
草案 初回定義

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
基本対応
実験的
Chrome 完全対応 17
接頭辞付き 補足
完全対応 17
接頭辞付き 補足
接頭辞付き -webkit- のベンダー接頭辞が必要
補足 Supports the original dual-image with percentage implementation only.
Edge ? Firefox ? IE 未対応 なしOpera 完全対応 15
接頭辞付き 補足
完全対応 15
接頭辞付き 補足
接頭辞付き -webkit- のベンダー接頭辞が必要
補足 Supports the original dual-image with percentage implementation only.
Safari 完全対応 10
補足
完全対応 10
補足
補足 Supports the original dual-image with percentage implementation only.
完全対応 5.1
接頭辞付き 補足
接頭辞付き -webkit- のベンダー接頭辞が必要
補足 Supports the original dual-image with percentage implementation only.
WebView Android 完全対応 あり
接頭辞付き 補足
完全対応 あり
接頭辞付き 補足
接頭辞付き -webkit- のベンダー接頭辞が必要
補足 Supports the original dual-image with percentage implementation only.
Chrome Android 完全対応 あり
接頭辞付き 補足
完全対応 あり
接頭辞付き 補足
接頭辞付き -webkit- のベンダー接頭辞が必要
補足 Supports the original dual-image with percentage implementation only.
Edge Mobile ? Firefox Android ? Opera Android 完全対応 15
接頭辞付き 補足
完全対応 15
接頭辞付き 補足
接頭辞付き -webkit- のベンダー接頭辞が必要
補足 Supports the original dual-image with percentage implementation only.
Safari iOS 完全対応 9.3
補足
完全対応 9.3
補足
補足 Support for the original dual-image with percentage implementation only.
完全対応 5
接頭辞付き 補足
接頭辞付き -webkit- のベンダー接頭辞が必要
補足 Supports the original dual-image with percentage implementation only.
Samsung Internet Android 完全対応 あり
接頭辞付き 補足
完全対応 あり
接頭辞付き 補足
接頭辞付き -webkit- のベンダー接頭辞が必要
補足 Support for the original dual-image with percentage implementation only.

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。
実装ノートを参照してください。
実装ノートを参照してください。
使用するには、ベンダー接頭辞または異なる名前が必要です。
使用するには、ベンダー接頭辞または異なる名前が必要です。

関連情報

ドキュメントのタグと貢献者

このページの貢献者: mfuji09
最終更新者: mfuji09,