开发者社区> 问答> 正文

应该如何实现?

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

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

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

展开
收起
杨冬芳 2016-05-31 18:39:26 1885 0
1 条回答
写回答
取消 提交回答
  • IT从业

    opacity: 0的话不就完全消失了吗,你是想要一种在header里,背景图片是半透明的效果吗?啥叫从穿了孔的纸看背景的效果,有类似的网站看看不?

    2019-07-17 19:22:23
    赞同 展开评论 打赏
问答地址:
问答排行榜
最热
最新

相关电子书

更多
如何使用Tair增强数据结构构建丰富在线实时场景 立即下载
JAVA反射原理以及一些常见的应用 立即下载
如何做小程序性能优化 立即下载