Toggle navigation
☰
HTML
CSS
Scripting
Database
<!DOCTYPE html> <title>My Example</title> <style> .blend-implemented { /* Fallback for WebKit/Blink browsers */ background-image: -webkit-cross-fade(url('/pix/samples/22m.jpg'), url('/pix/samples/30m.jpg'), 75%); /* Unprefixed implemented syntax */ background-image: cross-fade(url('/pix/samples/22m.jpg'), url('/pix/samples/30m.jpg'), 75%); background-repeat: no-repeat; width: 500px; max-width: 100%; height: 375px; border: 1px solid #ccc; } </style> <div class="blend-implemented"></div> <p>The above example blends the following two images:</p> <div style="float:left; width:50%; margin:0 0 10px;"> <img src="/pix/samples/22m.jpg" alt="Image 1" style="max-width:100%;"> </div> <div style="float:right; width:50%; margin:0 0 10px;"> <img src="/pix/samples/30m.jpg" alt="Image 2" style="max-width:100%;"> </div>
