html - Mask div using CSS -
ok i'm using follow setup divs:
.background
contain image. .overlay
have semitransparent white background overlay .inner
mask out rectangle size of div? background transparent , cuts through overlay div.
<div class="background"> <div class="overlay"> <div class="inner"> </div> </div> </div>
is possible css?
looks can achieve adding thick border opacity (fiddle). border widths determine size of rectangle desired:
<div class="background"> <div class="inner"> </div> </div>
and css:
html, body { height: 100%; width: 100%; } .background { width: 100%; height: 100%; background: url('http://farm9.staticflickr.com/8242/8558295633_f34a55c1c6_b.jpg'); } .inner { width: 100%; height: 100%; border-top: 130px solid rgba(255, 255, 255, 0.5); border-bottom: 130px solid rgba(255, 255, 255, 0.5); border-left: 100px solid rgba(255, 255, 255, 0.5); border-right: 100px solid rgba(255, 255, 255, 0.5); box-sizing: border-box; }
Comments
Post a Comment