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*/

}

查看 jsfiddle