mask-repeat-2-ref.html (1318B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>CSS Masking: mask-repeat: repeated mask layer image</title> 6 <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com"> 7 <link rel="author" title="Mozilla" href="https://www.mozilla.org"> 8 <style type="text/css"> 9 div.outer { 10 width: 128px; 11 height: 128px; 12 position: relative; 13 border: 1px solid black; 14 } 15 16 div.inner { 17 width: 50px; 18 height: 50px; 19 position: absolute; 20 background-color: purple; 21 } 22 23 #pos-top-left { left: 0; top: 0; } 24 #pos-top-right { right: 0; top: 0; } 25 #pos-bottom-left { left: 0; bottom: 0; } 26 #pos-bottom-right { right: 0; bottom: 0; } 27 </style> 28 </head> 29 <body> 30 <div class="outer"> 31 <div class="inner" id="pos-top-left"></div> 32 <div class="inner" id="pos-top-right"></div> 33 <div class="inner" id="pos-bottom-left"></div> 34 <div class="inner" id="pos-bottom-right"></div> 35 </div> 36 <div class="outer"> 37 <div class="inner" id="pos-top-left"></div> 38 <div class="inner" id="pos-top-right"></div> 39 </div> 40 <div class="outer"> 41 <div class="inner" id="pos-top-left"></div> 42 <div class="inner" id="pos-bottom-left"></div> 43 </div> 44 </body> 45 </html>