开发者社区> 问答> 正文

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

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

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这部分能看得到背景图像,也就是《霍比特人》的海报。
screenshot

展开
收起
a123456678 2016-05-27 17:27:53 2354 0
1 条回答
写回答
取消 提交回答
  • 这个效果是实现不了的,因为header是.wrapper 子元素也就是说 你设置header visibility:hidden和opacity: 0都是只能看到 .wrapper 而不是看到html的背景的 也就是不能穿墙的
    像你这种完全可以切片做 而不是一张大大的.wrapper

    2019-07-17 19:18:26
    赞同 展开评论 打赏
问答分类:
问答标签:
问答地址:
问答排行榜
最热
最新

相关电子书

更多
零基础CSS入门教程 立即下载
低代码开发师(初级)实战教程 立即下载
阿里巴巴DevOps 最佳实践手册 立即下载