切断元素内容的一部分

Question

是否有可能在div＃inner的形状中切掉div＃outer的一部分？我希望实现这样的目标：

Answer 1

如果只是通过洞显示背景图片，那么您可以使用相同的图片作为#inner div的背景，并将其background-attachment设置为fixed

像

这样的东西

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

和

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

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

http://codepen.io/gpetrioli/pen/GsBbd的演示 （包含一些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/