IE,Opera,Firefox以外のブラウザが今回対象です。
タイトルの通り２枚の画像を合成して表示するcross-fade()関数を使います。この関数は画像を扱えるプロパティの値として使用します。
引数の指定方法
●画像のURL
合成する１枚目と２枚目の画像のURLを指定する。
●合成度合
１枚目の画像を２枚目の画像にどのくらい合成するかを「%値を」を指定する。例を挙げると「0%」と指定すると、２枚目の画像のみ「100%」を指定すると１枚目の画像のみが表示され、その間の値によって、合成される度合いは変化します。
|
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 |
<!DOCTYPE html> <head> <meta charset="utf-8"> <title>画像を合成して表示する</title> <style> div{ width:320px; height:180px; margin-bottom:1em; } .croFad30per{ background:-webkit-cross-fade(url(1.jpg),url(2.jpg),30%); } .croFad60per{ background:-webkit-cross-fade(url(1.jpg),url(2.jpg),60%); } .croFad90per{ background:-webkit-cross-fade(url(1.jpg),url(2.jpg),90%); } </style> </head> <body> <div class="croFad30per">30%</div> <div class="croFad60per">60%</div> <div class="croFad90per">90%</div> </body> </html> |