Toggle navigation
☰
HTML
CSS
Scripting
Database
<!DOCTYPE html> <title>My Example</title> <style> .blend-spec { /* Official W3C Specification Syntax */ /* The first image is at 25%, the second is at 75% */ background-image: cross-fade(url('/pix/samples/22m.jpg') 25%, 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-spec"></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>
