問(wèn)題描述

<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內(nèi)的一個(gè)寬度為父元素一半的子元素，現(xiàn)在我想使header能夠顯示設(shè)置在html元素上的背景圖片bg.jpg，這個(gè)效果有點(diǎn)像，透過(guò)一張中間穿了孔的紙看背景，應(yīng)該還挺常見(jiàn)的。

我使用了visibility:hidden和opacity: 0屬性，都不生效，應(yīng)該如何實(shí)現(xiàn)？

補(bǔ)充說(shuō)明：請(qǐng)看圖片，cover的位置如圖，我希望cover這部分能看得到背景圖像，也就是《霍比特人》的海報(bào)。在

問(wèn)題解答

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

這個(gè)效果是實(shí)現(xiàn)不了的，因?yàn)閔eader是.wrapper 子元素也就是說(shuō) 你設(shè)置header visibility:hidden和opacity: 0都是只能看到 .wrapper 而不是看到html的背景的 也就是不能穿墻的像你這種完全可以切片做 而不是一張大大的.wrapper

wrapper不要使用背景，邊界白色可以用邊框代替，下面內(nèi)容區(qū)域酌情用背景就可以了

子元素使用多個(gè)標(biāo)簽組成，中間那部分全透明；不然就是中間那部分另做一個(gè)背景，和父元素一樣的背景圖片，然后定位圖片的位置，這個(gè)比較麻煩點(diǎn)

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

@飛天小菜鳥(niǎo) 說(shuō)用兩張背景圖，然后再定位。這提醒了我。

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