<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这部分能看得到背景图像,也就是《霍比特人》的海报。
在
PHPz2017-04-17 11:18:15
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?
天蓬老师2017-04-17 11:18:15
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
高洛峰2017-04-17 11:18:15
wrapper
Do not use a background. The white border can be replaced by a border. Just use the background for the following content area as appropriate
PHP中文网2017-04-17 11:18:15
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
PHPz2017-04-17 11:18:15
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.