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

If opacity: 0, wouldn't it disappear completely? Do you want a translucent effect in the background image in the header? What is the effect of looking at the background from perforated paper? Are there any similar websites?

Answer 2

This effect cannot be achieved because the header is a child element of .wrapper, which means that if you set header visibility:hidden and opacity: 0, you can only see .wrapper instead of html. The background cannot pass through walls
It can be done in slices like yours instead of a big wrapper

Answer 3

wrapperDo not use a background. The white border can be replaced by a border. Just use the background for the following content area as appropriate

Answer 4

The child elements are composed of multiple tags, and the middle part is completely transparent; otherwise, a separate background is made for the middle part, the same background image as the parent element, and then the position of the image is positioned, which is more troublesome

Answer 5

According to your answers, I tried to remove the background color of wrapper and then slowly spliced ​​it. This is doable, but too cumbersome.

@飞天小 noobiao said to use two background images and then position them. This reminds me.

I happened to use CSS3 background: url(../images/bg.jpg) no-repeat center center fixed; background-size: cover; to set the background image, so I directly This is also set on the cover element, which directly achieves the effect.