裁剪背景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使用相同的背景网址来做一些技巧。

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

}

view jsfiddle