HTML Code

<!DOCTYPE html>



<html lang="en">



<head>



  <meta charset="UTF-8">



  <meta name="viewport" content="width=device-width, initial-scale=1.0">



  <title>CSS mask-mode match-source Example</title>



  <style>



    body {



      font-family: system-ui, sans-serif;



      padding: 1.5rem;



      line-height: 1.6;



      background: #f8fafc;



    }







    .mask-default {



      width: 280px;



      height: 200px;



      background: url('/images/valley-pattern.jpg') center/cover;



      -webkit-mask-image: url('/images/apple.png');



      mask-image: url('/images/apple.png');



      -webkit-mask-size: contain;



      mask-size: contain;



      -webkit-mask-repeat: no-repeat;



      mask-repeat: no-repeat;



      -webkit-mask-position: center;



      mask-position: center;



      /* mask-mode: match-source; — implicit default */



    }



  </style>



</head>



<body>



  <h1>Default match-source Mode</h1>



  <p>No <code>mask-mode</code> is set — the browser uses <code>match-source</code> automatically.</p>



  <div class="mask-default"></div>



</body>



</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

CSS mask-mode Property - match-source default