You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
42 lines
917 B
42 lines
917 B
<!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: 6in; |
|
} |
|
.diff { |
|
width: 4in; |
|
height: 6in; |
|
background-repeat: none, none; |
|
background-size: contain, contain; |
|
background-blend-mode: difference; |
|
display: inline-block; |
|
} |
|
|
|
</style> |
|
</head> |
|
<body> |
|
|
|
<% images.each_with_index do |(expected, actual), i| %> |
|
|
|
<img src="<%= expected %>"/> |
|
<img src="<%= actual %>"/> |
|
<style> |
|
.mine<%= i %> { |
|
background-image: url(<%= expected %>), url(<%= actual %>);" |
|
} |
|
</style> |
|
<div class="diff mine<%= i %>"/> |
|
|
|
<% end %> |
|
|
|
</body> |
|
</html>
|
|
|