切掉元素內容的一部分

Question

是否可以在div＃inner的形狀中切掉部分div＃outer？我想實現這樣的事情：

Answer 1

如果它只是一個背景圖像通過洞顯示，那麼你可以使用相同的圖像爲#inner格的背景，並將其background-attachment設置爲fixed

類似於

<div id="outer"> 
    <div id="inner">div#inner</div> 
    div#outer 
<div> 

，並在http://codepen.io/gpetrioli/pen/GsBbd

body{background:url('someimage') 0 0 no-repeat;} 

#inner{ 
    background:url('someimage') 0 0 no-repeat fixed; 
} 

演示（包含一些JavaScript來左右​​移動div，只需點擊並拖動）

Answer 2

可以使用mask-image你需要切出形狀的圖像，例如：

mask-image: url(mask-image.png); 

但是我不知道怎麼樣它適用於IE。 Check here for more details on mask-image property;

Answer 3

嘗試使用僞構件的透明元件連接到它的父，具有大的邊界，讓具有孔的印象：

#outer { 
    background:red; 
    width:400px; 
    margin-left: 60px; 
    height:100px; 
    position:relative; 
} 
#inner { 
    position:absolute; 
    right:-150px; 
    top:0; 
    bottom:0; 
    width:150px; 
    overflow:hidden; 
} 
#inner:after { 
    content:""; 
    width:30px; 
    height:30px; 
    display:block; 
    border:red 50px solid; 
    position: absolute; 
    top:-20px; 
    left:0; 
} 

http://jsfiddle.net/PMSdG/3/