<div class="original"></div>
<div class="mask"></div>
<div class="mask-color"></div>
<div class="mask-gradient"></div>
$img: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0xMS40OTIgNS44NjFjMC0uODI4LS42NzEtMS41LTEuNS0xLjUtLjgyNyAwLTEuNDk5LjY3Mi0xLjQ5OSAxLjVzLjY3MiAxLjUgMS40OTkgMS41Yy44MjkgMCAxLjUtLjY3MiAxLjUtMS41em0tMi41MzcgMy45NDFjLS4wNzcuMTctLjMyNS4zNTItLjU3NC4zNTItLjUwMSAwLS40ODItLjY1NS0uNDgyLTEuMTA1LjQ1Mi0uMTcyLjc3OS0uNTk3Ljc3OS0uOTc5IDAtLjQ5LS41MzEtLjcwOS0xLjE4NC0uNzA5LS42NTMgMC0xLjE4My4yMTktMS4xODMuNzA5IDAgLjM4Mi4zMjcuODA3Ljc3OC45NzkgMCAuNDQ3LjAxNiAxLjEwMy0uNDg2IDEuMTAzLS4yMjMgMC0uNDg0LS4xNjEtLjU2OS0uMzUtLjIyMS0uNDg5LS45NTktLjE1NC0uNzQuMzMyLjIxOS40ODcuNzYxLjgyNyAxLjMxOC44MjcuMzQzIDAgLjY1Mi0uMTM1Ljg4Mi0uMzgyLjIyOS4yNDcuNTM4LjM4Mi44ODEuMzgyaC4wMDFjLjU1NSAwIDEuMDk3LS4zNCAxLjMxNy0uODI3LjIyLS40ODctLjUyLS44MjEtLjczOC0uMzMyem0tMi40Ni0zLjk0MWMwLS44MjgtLjY3Mi0xLjUtMS41LTEuNS0uODI3IDAtMS40OTkuNjcyLTEuNDk5IDEuNXMuNjcyIDEuNSAxLjQ5OSAxLjVjLjgyOCAwIDEuNS0uNjcyIDEuNS0xLjV6bTE2LjUwMiAxMi4yOTFjMCA0Ljk0NC0zLjU5MSA1LjgzNC01LjAwNyA1Ljg0Mi0uNzg3LjAwNS0yLjQuMDA2LTQuMjYuMDA2LTIuNDI3LS4wMi0yLjE1Ni0zLjAxMi0uMjA2LTIuOTczaDIuNjE2bC0uNTgzLS43OTZjLTEuMTYtMS41ODItLjc5MS0zLjU2OS44OTctNC44MzUuNTI5LS4zOTgtLjA3LTEuMTk1LS42LS44MDEtMS44ODEgMS40MTItMi40NjUgMy41NDYtMS41NzkgNS40MzJoLS43NDJjLS45MjguMDE1LTEuNzMyLjQxLTIuMTg1IDEuMTcxLS4zMzkuNTczLS42NSAxLjc0NC4xMzkgMi44MDFsLTMuNDMyLS4wMDNjMS4zNy0xLjY4OSAxLjAxOS00Ljk4OS45MzQtNS42NDItLjA4OC0uNjY1LTEuMDc3LS41MTgtLjk5MS4xMzEuMjIzIDEuNjkuMjc1IDUuNDA1LTEuOTkzIDUuNTA5aC0yLjAwOWMtMi4wODQuMDA4LTEuOTQ0LTMuMDI0IDAtMi45OTkuNTYxLjAwNy4yNTkuMDA4Ljk5OSAwIDEuMDA5LTMuNTYtMS43MTktNS40MjItMS4yNzQtOC43ODgtMS45MDctLjk4Ni0yLjcyNC0yLjc5Mi0yLjcyNC00Ljg2MiAwLTIuNTA0IDEuMTkzLTUuMTU2IDIuODU1LTcuMzQ1IDEuMTU5IDEuMDM4IDEuNzAyIDEuNzA2IDIuNDYxIDIuODQ5LjYyNi0uMTU4IDEuNzA1LS4xNjEgMi4zNjMgMCAuNzkyLTEuMjAxIDEuMzMzLTEuODY2IDIuNDYxLTIuODQ5IDMuNzY0IDQuOTg5IDIuNzM2IDguNjUgMi42OTEgOC44NDkgMi4xMDguODE5IDQuMjQgMi4wNjEgNS45MTYgMy41NzktLjcxNC0yLjc3NS0uNzEzLTQuNzI0IDEuNTEzLTcuMTExLjkwNy0uOTcgMi4zNTkuNDAxIDEuNDYxIDEuMzYzLTEuNDk4IDEuNjA4LTEuNTg4IDIuODkxLTEuMjYyIDQuMzI0LjcxMiAzLjEzNyAxLjU0MSA0LjcxNSAxLjU0MSA3LjE0OHptLTE4LjAwNS0xMi45OTNjLS4zODYgMC0uNy4zMTUtLjcuNzAxIDAgLjM4NS4zMTQuNy43LjcuMzg2IDAgLjctLjMxNS43LS43IDAtLjM4Ni0uMzE0LS43MDEtLjctLjcwMXptNS43LjcwMWMwIC4zODUtLjMxNC43LS43LjctLjM4NiAwLS43MDEtLjMxNS0uNzAxLS43IDAtLjM4Ni4zMTUtLjcwMS43MDEtLjcwMS4zODYgMCAuNy4zMTUuNy43MDF6Ii8+PC9zdmc+';
html, body {
width: 100%;
height: 100%;
display: flex;
// background: linear-gradient(45deg, #fff, #aaa);
}
div {
width: 250px;
height: 200px;
margin: auto;
}
.original {
background: url($img);
background-size: cover;
}
.mask {
background: #000;
mask:
url($img),
linear-gradient(#fff, #000);
mask-composite: exclude;
mask-size: cover;
mask-repeat: no-repeat;
}
.mask-color {
background: green;
mask:
url($img),
linear-gradient(#fff, #000);
mask-composite: source-in;
mask-size: cover;
mask-repeat: no-repeat;
}
.mask-gradient {
background: linear-gradient(blue, yellowgreen);
mask:
url($img),
linear-gradient(#fff, #000);
mask-composite: source-in;
mask-size: cover;
mask-repeat: no-repeat;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.