Skip to content

Instantly share code, notes, and snippets.

@hteumeuleu

hteumeuleu/background-blend-mode-demo.html

Created February 26, 2020 14:57
Show Gist options
  • Save hteumeuleu/a8d2aae5743d6b92b278d4932fd28269 to your computer and use it in GitHub Desktop.
Save hteumeuleu/a8d2aae5743d6b92b278d4932fd28269 to your computer and use it in GitHub Desktop.
Download ZIP
Demo of using background-blend-mode to attenuate background images in dark mode in Outlook.com
Raw
background-blend-mode-demo.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>background-blend-mode</title>
<style>
@media only screen and (min-width:650px) {
.demo-object { display:block!important; }
}
</style>
</head>
<body>
<div style="max-width:650px; margin:0 auto;">
<div class="demo-object" style="display:none; z-index:1; opacity:0.9999; max-height:0">
<p style="margin:0; width:95px; padding:178px 0 0 40px; font-size:0; line-height:0">
<img src="https://i.imgur.com/nCGYQCp.png" alt="" style="display:block; margin:0 auto" width="95" height="104" border="0" />
</p>
</div>
<div class="demo-object" style="display:none; z-index:1; opacity:0.9999; max-height:0">
<p style="margin:0 0 0 auto; width:94px; padding:27px 10px 0 0; font-size:0; line-height:0">
<img src="https://i.imgur.com/khwjv8j.png" alt="" style="display:block; margin:0 auto" width="94" height="104" border="0">
</p>
</div>
<table role="presentation" style="width: 100%; table-layout: fixed; background: #fff url(https://i.imgur.com/OQy8dmj.jpg) no-repeat scroll center top; background-blend-mode: multiply;" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td style="width:12.46153846%;"></td>
<td style="height:303px; vertical-align:middle" height="303">
<table role="presentation" style="width:100%; table-layout:fixed" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td style="padding:27px 20px 13px">
<h2 style="margin:0 0 21px; background:none; border:none; text-align:center; font:bold 24px serif; color:#be0f34;">
Lorem ipsum
</h2>
<p style="margin: 0px 0px 8px; color:#000; font: 12px / 1.3333 Arial, sans-serif; letter-spacing: 0.02em; text-align: center;">
Lorem ipsum dolor sit amet?<br />
Quas asperiores tempora repellendus eius id odio?
</p>
<p style="margin: 0px 0px 24px; color:#000; font: bold 12px / 1.3333 Arial, sans-serif; letter-spacing: 0.02em; text-align: center;">
Pariatur officiis ipsam! Rerum neque commodi tenetur assumenda.
</p>
<table role="presentation" style="width:165px; max-width:100%; table-layout:fixed; background:#be0f34; border:2px solid #be0f34; border-collapse:collapse; margin:0 auto" cellspacing="0" cellpadding="0" border="0" align="center">
<tbody>
<tr>
<td style="height:36px; text-align:center; vertical-align:middle" height="36">
<a href="https://www.example.com" target="_blank" style="display:block; padding:11px 12px; color:#fff; text-transform:uppercase; font:bold 11px/1.25 Arial,sans-serif; letter-spacing:0.1em; text-align:center; text-decoration:none">CALL TO ACTION</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
<td style="width:9.23076923%;"></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment