39 lines
872 B
HTML
39 lines
872 B
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta name="viewport" content="width=device-width">
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
|
<title>Diff with CSS Example</title>
|
|
<style>
|
|
body{
|
|
background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAHElEQVQYlWO4ePFiAzGY4eLFiw0MxIBRhVRRCADsljgKUbBKPgAAAABJRU5ErkJggg==) repeat;
|
|
}
|
|
img{
|
|
height: 4in;
|
|
}
|
|
.diff {
|
|
width: 3in;
|
|
height: 4in;
|
|
background-repeat: none, none;
|
|
background-size: contain, contain;
|
|
background-blend-mode: difference;
|
|
display: inline-table;
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<img src="expected/autoscale_00.png"/>
|
|
<img src="expected/autoscale_01.png"/>
|
|
<style>
|
|
.mine{
|
|
background-image: url(expected/autoscale_00.png), url(expected/autoscale_01.png);"
|
|
}
|
|
</style>
|
|
<div class="diff mine"/>
|
|
|
|
|
|
</body>
|
|
</html> |