将html背景图像从一个元素传递到另一个元素

Question

假设我有三个级别的层次结构html代码，如下所示：

<section>
  <div id="outer">
    <div id="inner">
    </div>
  </div>
</section>

我将background-image:someImage.jpg设置为section，将background:white设置为外部div。有没有办法设置相同的图像 - someImage.jpg作为内部div的背景但是它实际上显示部分的背景而不是仅使用相同的图像两次。 部分iof内部div是透明的，而不是看到外部div的白色背景，我想看到该部分的背景图像。 假设这三个元素看起来像这样：

Answer 1

你想要这样的东西：

<section>
  <div id="outer">
    <div id="inner">
    </div>
  </div>
</section>

section, #outer, #inner {
    padding: 20px;
    display: block;
}

section {
    background: url('http://st.depositphotos.com/1907633/3138/i/950/depositphotos_31380901-Abstract-metal-molecules-medical-background.jpg') no-repeat center center;
}

#outer {
    background-color: rgba(255, 255, 255, 0.5);
}

#inner {
    background-color: gray;
}

链接到jsfiddle：http://jsfiddle.net/77xyo575/

Answer 2

为#outer使用边框而不是背景，并使#inner半透明。例如：

section {
    float: left;
    padding: 40px;
    background: url(background image) repeat center center;
}

#outer {
    border: 40px solid white;
}

#inner {
    width: 60px;
    height: 60px;
    background-color: rgba(255, 255, 255, 0.5)
}

请参阅this Fiddle.