HTML
8
1
<div class="wrapper">2
<div class="container">3
<p>4
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam, culpa, quas, quos pariatur iure officiis aut asperiores aspernatur doloremque reprehenderit velit laboriosam itaque ipsam saepe quod. Eaque, a debitis consequuntur!5
</p>6
<img src="http://tympanus.net/codrops-playground/assets/images/cssref/properties/mask-origin/field.jpg" alt="">7
</div>8
</div>CSS
31
1
body {2
background-color: #111;3
color: #555;4
font-size: 1.1em;5
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;6
}7
8
.wrapper {9
margin: 20px auto;10
border: 1px solid #333;11
max-width: 740px;12
}13
14
.container {15
display: block;16
max-width: 640px;17
padding: 30px;18
height: 400px;19
background-color: white;20
border: 20px solid fuchsia;21
mask-image: url(http://tympanus.net/codrops-playground/assets/images/cssref/properties/mask-origin/mask-image.png);22
mask-image: url(http://tympanus.net/codrops-playground/assets/images/cssref/properties/mask-origin/mask-image.png);23
mask-position: top left;24
mask-position: top left;25
mask-repeat: repeat;26
mask-repeat: repeat;27
mask-size: 150px 150px;28
mask-size: 150px 150px;29
mask-origin: content-box;30
mask-origin: content-box;31
}JS
1
1