html - How to show the page background above a div using another div in a particular shape -

i have page background set img. have div(say div_1) @ top:50% horizontal black bar of opacity 0.6. above right @ left 50% want show div(with content in it) white background round cornered box opacity 0.6 div_2.

i want div_2 directly on page background no effect div_1. may little confusing. thing div_2 on div_1 , div_2 has transparent background, div_1 effecting of div_2.(as i'm placing white transparent box on black box). why not remove div_1 then..? can not want black strip in center of page.

may need 1 of this

1)something reverse of anti clip can cut off exact part of div_1 div_2 present,so div_2 looks right on page background no interference div_1.

2)take div(div_3) , show exact part of page background present underneath div_2 , put on div_1 , put div_2 if on page background.

but i'm unable idea on how @ least 1 of 2 solutions. other solution happily accepted.

edit

here code have far,

[code](http://jsfiddle.net/5sdce/) 

please check , feel of "required" tag can not seen in div_2, cause of div_1 behind it, , can not make div_1 float next div_2 div_2 of rounded corner.

tried myself , solved it, if needs it, please refer answer below.

thanks in advance.

i assume searching similar this.

two commonly used operations in computer graphics clipping , masking. both operations hide visual portions of element. if have worked svg or html canvas before, these operations not new you. clipping defines region of element visible. around region not rendered - gets "clipped". on masking, mask image composited element, affecting alpha channel of element. portions of masked element or partially transparent. new css masking specification aims bring these 2 operations html world.

clipping in css 2.1

css 2.1 specified clip property. property limited rectangular clipping rect() function taking 4 distance arguments top, right, bottom , left edges. annoying part: clip property applies absolutely positioned elements exclusively. property ignored on other elements.

css:

img {   position: absolute;   clip: rect(10px, 290px, 190px, 10px); } 

html:

<img src="image.jpg" width="568"> 

the clip property limited specific elements in svg well. 1 reason why svg specification added clip-path property adapted css masking now.

the clip-path property

the clip-path property can applied html elements, svg graphic elements , svg container elements. either references element or 1 of basic shapes introduced css exclusions.

the element takes graphical element svg , uses them clipping region. graphical elements in svg , , , , , , . allows combining multiple graphical elements well. union of shapes used clipping region. following example demonstrates use of :

css:

img {   clip-path: url(#clipping); } 

html:

<svg>   <defs>     <clippath id="clipping">       <circle cx="284" cy="213" r="213" />     </clippath>   </defs> </svg>  <img src="image.jpg" width="568"> 

basic shapes on other hand not require svg markup. added clip-path provide easy shorthand functions simple clipping operations.

• rectangle(, , , , , ) defines rectangle, similar rect() function of clip, , adds 2 optional radius parameters rounded rects.
• circle(, , ) defines simple circle center point , radius.
• ellipse(, , , ) defines ellipse center point , horizontal , vertical radius.
• polygon( , , ..., ) defines polygon based on passed point list.

the css markup can following example:

img {   clip-path: polygon(0px 208px, 146.5px 207px, 147px 141.2px, ...); } 

clipping can useful presentation of visual content. following examples apply different clipping operations images.

hope helps.

edit

the updated solution. have 2 solutions. 1 existing scenario , next 1 want reverse.

you have use masking concept same.

the html:

<svg>   <defs>     <lineargradient id="gradient" x1="0" y1="00%" x2 ="0" y2="100%">       <stop stop-color="black" offset="0"/>       <stop stop-color="white" offset="1"/>     </lineargradient>      <mask id="masking" maskunits="objectboundingbox" maskcontentunits="objectboundingbox">       <rect y="0.3" width="1" height=".7" fill="url(#)" />       <circle cx=".5" cy=".5" r=".35" fill="white" />     </mask>   </defs> </svg>  <img id="a" src="http://1-ps.googleusercontent.com/x/s.html5rocks-hrd.appspot.com/www.html5rocks.com/en/tutorials/masking/adobe/xclip1a.png.pagespeed.ic.zv42frgxly.jpg">           <svg>   <defs>     <lineargradient id="gradient" x1="0" y1="00%" x2 ="0" y2="100%">       <stop stop-color="black" offset="0"/>       <stop stop-color="white" offset="1"/>     </lineargradient>      <mask id="masking1" maskunits="objectboundingbox" maskcontentunits="objectboundingbox">       <rect y="0.3" width="1" height=".7" fill="url(#gradient)" />       <circle cx=".5" cy=".5" r=".35" fill="black" />     </mask>   </defs> </svg>  <img id="b" src="http://1-ps.googleusercontent.com/x/s.html5rocks-hrd.appspot.com/www.html5rocks.com/en/tutorials/masking/adobe/xclip1a.png.pagespeed.ic.zv42frgxly.jpg"> 

the css:

img#a {   mask: url(#masking); }  img#b {   mask: url(#masking1); } 

hope helps.