css - 裁剪背景 CSS

Question

HTML:

<div id="large">
  <div id="medium">
    <div></div>
  </div>
</div>

CSS:

#large {
  width:600px;
  height:400px;
  background:url('image.jpg');
}

#medium {
  width:400px;
  height:200px;
  background:red;
  opacity:.5;
}

#medium div {
  width:300px;
  height:50px;
  background:?;
}

现在对于 #medium div 我想忽略 #medium 的背景，实现没有任何红色调的背景图像。

这可能吗？

Answer 1

我们可以通过对子 div 也使用相同的背景 url 来做一些技巧吗？

#medium div {
  width:300px;
  height:50px;
   background:url('image.jpg');
  background-position-x:34px;/*adjust yourself*/
  background-position-y:45px;/*adjust yourself*/

}

view jsfiddle