文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
社区首页 >问答首页 >在具有SVG背景的正文顶部具有透明背景的堆叠div后面隐藏溢出

问在具有SVG背景的正文顶部具有透明背景的堆叠div后面隐藏溢出
EN

Stack Overflow用户
提问于 2017-11-24 13:44:29
回答 4查看 1.8K关注 0票数 18

我有一个布局，其中包含一个带有按钮的fixed div (#navigation)。布局还包括可滚动内容(.card)。

出于演示目的，#navigation目前的背景是绿色的。如下所示：

​

代码语言：javascript
复制
#navigation {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translate(-50%, 0%);
  background: green;
  padding: 25px;
}
代码语言：javascript
复制
<div id="navigation"><button id="btn1">Button</button>
  <button id="btn2">Button</button>
  <button id="btn3">Button</button>
  <button id="btn4">Button</button>
</div>

​

我想要隐藏任何.card元素的任何部分，只要它隐藏在绿色背景后面。因此，我使用z索引堆叠顺序，它工作得很好。如下所示：

​

代码语言：javascript
复制
#card-wrapper {
  width: 250px;
  margin: 100px auto;
}

.card {
  height: 200px;
  width: 200px;
  background: #131418;
  margin: 1em auto;
  display: inline-block
}

#navigation {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translate(-50%, 0%);
  z-index: 1;
  background: green;
  padding: 25px;
}

#main {
  text-align: center;
}
代码语言：javascript
复制
<div id="main">

  <div id="navigation"><button id="btn1">Button</button>
    <button id="btn2">Button</button>
    <button id="btn3">Button</button>
    <button id="btn4">Button</button>
  </div>

  <div id="card-wrapper">
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
  </div>

</div>

​

但是，我也不想在生产中使用绿色背景。这意味着#navigation不应该有背景，只有里面的按钮应该是可见的。

所以我的问题是，一旦顶部溢出到达假设的绿色背景，我如何对#card-wrapper隐藏它？

​

代码语言：javascript
复制
#card-wrapper {
  width: 250px;
  margin: 100px auto;
}

.card {
  height: 200px;
  width: 200px;
  background: #131418;
  margin: 1em auto;
  display: inline-block
}

#navigation {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translate(-50%, 0%);
  z-index: 1;
  padding: 25px;
  border: 1px solid;
  background: transparent
}

#main {
  text-align: center;
}

body {
  margin: 0 auto;
  background: url(http://svgur.com/i/42T.svg);
  background-attachment:fixed;
  background-size:cover;
}
代码语言：javascript
复制
<div id="main">

  <div id="navigation"><button id="btn1">Button</button>
    <button id="btn2">Button</button>
    <button id="btn3">Button</button>
    <button id="btn4">Button</button>
  </div>

  <div id="card-wrapper">
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
  </div>

</div>

​

注意，body元素有一个SVG背景，我不能在#导航中添加任何背景，因为这看起来很糟糕。

只要不涉及硬编码的值，我对所有的解决方案CSS/JS/jQuery都持开放态度。

javascript
jquery
css
EN

回答 4

Stack Overflow用户

回答已采纳

发布于 2017-11-27 22:38:21

尝试为#导航设置相同的背景，使用相同的背景位置(参见下面的示例)

​

代码语言：javascript
复制
#card-wrapper {
  width: 250px;
  margin: 100px auto;
}

.card {
  height: 200px;
  width: 200px;
  background: #131418;
  margin: 1em auto;
  display: inline-block
}

#navigation {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1;
  padding: 40px 25px 25px 25px;
  background: #ffffff url(http://svgur.com/i/42T.svg);
  background-attachment: fixed;
  background-size: cover;
  background-position: 0 0;
}

#main {
  text-align: center;
}

body {
  margin: 0 auto;
  background: #ffffff url(http://svgur.com/i/42T.svg);
  background-attachment: fixed;
  background-size: cover;
  background-position: 0 0;
}
代码语言：javascript
复制
<div id="main">

  <div id="navigation">
    <button id="btn1">Button</button>
    <button id="btn2">Button</button>
    <button id="btn3">Button</button>
    <button id="btn4">Button</button>
  </div>

  <div id="card-wrapper">
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
  </div>

</div>

​

票数 15
EN

Stack Overflow用户

发布于 2017-11-30 19:41:08

您可以将导航用作固定导航，并且只允许滚动到您的内容区域。为此，您必须将position: absolute;添加到#card-wrapper中，并从.card中删除display:inline-block。

​

代码语言：javascript
复制
#card-wrapper {
  position: absolute;
  top: 100px;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: auto;
}

.card {
  height: 200px;
  width: 200px;
  background: #131418;
  margin: 1em auto;
  clear:both;
}

#navigation {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translate(-50%, 0%);
  z-index: 1;
  padding: 25px;
  border: 1px solid;
  background: transparent
}

#main {
  text-align: center;
}

body {
  margin: 0 auto;
  background: url(http://svgur.com/i/42T.svg);
  background-attachment:fixed;
  background-size:cover;
}
代码语言：javascript
复制
<div id="main">

  <div id="navigation"><button id="btn1">Button</button>
    <button id="btn2">Button</button>
    <button id="btn3">Button</button>
    <button id="btn4">Button</button>
  </div>

  <div id="card-wrapper">
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
  </div>

</div>

​

票数 2
EN

Stack Overflow用户

发布于 2017-12-01 06:00:25

经过一些试验和错误，我得到了这个解决方案，我认为它是到目前为止最好的

​

代码语言：javascript
复制
#card-wrapper {
  width: 250px;
  margin: 100px auto;
}

.card {
  height: 200px;
  width: 200px;
  background: #131418;
  margin: 1em auto;
  display: inline-block
}

#navigation {
  position: fixed;
  top: 20px;
  left: 25%;
  right:25%;
  z-index: 1;
  padding: 25px;
  border-top: 0.1px dotted;    
  border-bottom: 0.1px dotted;
  background: white url(http://svgur.com/i/42T.svg) top left/cover no-repeat fixed;
}

#main {
  text-align: center;
}

body {
  margin: 0 auto;
  background: white url(http://svgur.com/i/42T.svg) top left/cover no-repeat fixed;
}
代码语言：javascript
复制
<div id="main">

  <div id="navigation">
    <button id="btn1">Button</button>
    <button id="btn2">Button</button>
    <button id="btn3">Button</button>
    <button id="btn4">Button</button>
  </div>

  <div id="card-wrapper">
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
  </div>

</div>

​

票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/47467020

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档