Html 隐藏透明div下的div部分

我有两个div，上面的div是透明的，每个角上都有一个边界半径，下面有一个div，它使用固体背景渐变，在透明div下使用负边距和z索引将其推到上面的div后面

CSS有没有办法隐藏div上面div下面的部分

我这样做是因为我需要保持第二张图像中高亮显示的角

使用颜色停止时出现问题，如图所示：

jsfiddle.net/PKy8B/3/

正如有人问的那样，这将是理想的结果：

---

感谢大家的帮助，但上面和后面的透明div似乎不可能做到这一点，我已将顶部div更改为不再透明，这只是一个“最佳修复”选项。

不幸的是，div是透明的，您对此无能为力。你可以做的是在div使用颜色停止清除“悬垂”之前不启动背景渐变

HTML

<div class="top"></div>
<div class="bottom"></div>

---

注意：颜色停止必须与您移动底部div的量相同

您可以像移动顶部一样移动顶部吗-

我是说-

如果在

bottom

div中添加了

linear gradient（到底部

）

background: linear-gradient(to bottom, 
        rgba(0,0,0,0) 0%,
        rgba(0,0,0,0) 10px, /* end transparent section*/
        rgba(255,0 ,0 ,0.25) 10px, /* start visible section */
        rgba(255,0,0,.25) 100%);

然后，您也可以对Top执行相同的操作：

我的意思是用

top

background: linear-gradient(to top, 
        rgba(0,0,0,0) 0%,
        rgba(0,0,0,0) 10px, /* end transparent section*/
        rgba(0,0 ,0 ,0.25) 10px, /* start visible section */
        rgba(0,0,0,.25) 100%);

添加此-

线性渐变（到顶部

background: linear-gradient(to top, 
        rgba(0,0,0,0) 0%,
        rgba(0,0,0,0) 10px, /* end transparent section*/
        rgba(0,0 ,0 ,0.25) 10px, /* start visible section */
        rgba(0,0,0,.25) 100%);

在这里检查-

---

我认为你的

查看更多
蓝色按钮将是一个图像。因此不会有任何问题。
发布你的代码并制作一个。谢谢你想删除红色圆圈的圆角吗？不。div是transaprent，你对此无能为力。你可以做的是在d之后才开始背景渐变iv已使用色块清除了“悬垂”。不，我想隐藏底部顶部div后面的部分，您可以看到它被负边距向上推的线条。如果使用色块，红色圆圈处将有一个空白位，您明白吗？正如我所说：“我这样做是因为我需要保留第二张图片中突出显示的角点。”然后我想我们/你必须重新思考。然后，也许你可以提供一些你当前的HTML和CSS，这样我们就可以看到我们可以调整的内容。@Sam-你想要的结果是什么？可以为此发布任何快照吗？请参阅原始的发布底部图片。