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

Popular posts from this blog

Failed to execute goal org.apache.maven.plugins:maven-surefire-plugin:2.12:test (default-test) on project.Error occurred in starting fork -

windows - Debug iNetMgr.exe unhandle exception System.Management.Automation.CmdletInvocationException -

configurationsection - activeMq-5.13.3 setup configurations for wildfly 10.0.0 -