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

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

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

我将

background image:someImage.jpg

设置到

部分，将
background:white
设置到外部div。有没有办法将相同的图像-
someImage.jpg
设置为内部div的背景，但在某种程度上它实际上显示了部分的背景，而不仅仅是使用相同的图像两次。
内部div的部分iof是透明的，我不想看到外部div的白色背景，而是想看到该部分的背景图像。
假设三个元素如下所示：

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

你想要这样的东西：

<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;
}


截面，#外部，#内部{
填充：20px；
显示：块；
}
部分{
背景：url（'http://st.depositphotos.com/1907633/3138/i/950/depositphotos_31380901-Abstract-metal-molecules-medical-background.jpg“）无重复中心；
}
#外{
背景色：rgba（255、255、255、0.5）；
}
#内在的{
背景颜色：灰色；
}

链接到JSFIDLE:
使用边框作为“外部”而不是“背景”，并使“内部”半透明。例如：

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)
}

看