html - 截断部分元素内容

Question

是否可以以 div#inner 的形状切除部分 div#outer？我想实现这样的目标：

Answer 1

如果它只是为了通过孔显示背景图像，那么您可以使用相同的图像作为#innerdiv 的背景并将其设置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 一起使用。在此处查看有关 mask-image 属性的更多详细信息；

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/