html - 如何使用CSS使元素内部分区域显示父级元素的背景？

Question

<p class="wrapper">
        <header id="cover">
            <p class="cover">
            </p>
        </header>
</p>

html {
    background: url(../images/bg.jpg) no-repeat center center fixed;
     -webkit-background-size: cover;
     -moz-background-size: cover;
     -o-background-size: cover;
     background-size: cover;
     height: 100%;
}

.wrapper {
    width: 85%;
    margin: 0 auto;
    background-color: #fff;
    height: 90%;
    position: relative;
}

header {
    width: 50%;
    text-align: center;
}

Markup大概是这样的，header是wrapper内的一个宽度为父元素一半的子元素，现在我想使header能够显示设置在html元素上的背景图片bg.jpg，这个效果有点像，透过一张中间穿了孔的纸看背景，应该还挺常见的。

我使用了visibility:hidden和opacity: 0属性，都不生效，应该如何实现？

补充说明：请看图片，cover的位置如图，我希望cover这部分能看得到背景图像，也就是《霍比特人》的海报。
在

Answer 1

opacity: 0的話不就完全消失了嗎，你是想要一種在header裡，背景圖片是半透明的效果嗎？啥叫從穿了孔的紙看背景的效果，有類似的網站看看不行？

Answer 2

這個效果是實現不了的，因為header是.wrapper 子元素也就是說你設定header visibility:hidden和opacity: 0都是只能看到.wrapper 而不是看到html的背景的也就是不能穿牆的
像你這種完全可以切片做 而不是一張大大的.wrapper

Answer 3

wrapper不要使用背景，邊界白色可以用邊框代替，下面內容區域酌情用背景就可以了

Answer 4

子元素使用多個標籤組成，中間那部分全透明；不然就是中間那部分另做一個背景，和父元素一樣的背景圖片，然後定位圖片的位置，這個比較麻煩點

Answer 5

依照各位的回答，我嘗試了將wrapper的背景色去掉，然後慢慢拼接。這是可行的， 但是太麻煩了。

@飛天小菜鳥 說用兩張背景圖，然後再定位。這提醒了我。

剛好我是用CSS3中的background: url(../images/bg.jpg) no-repeat center center fixed; background-size: cover;設定背景圖片的，於是直接在cover元素上也這麼設置，直接到達了效果。