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を見る