隐藏透明div下的div的一部分

Question

我有2个div，上面的div是透明的，每个角上都有一个边框半径，有一个div在它下方使用实心背景渐变，并且使用负边距和z-index在透明div下面向上推把它放在上层div之后。

有没有办法用CSS来隐藏div上面的div部分？

我是这样做的，因为我需要保持第二张图片中突出显示的角落。

使用此处所示的颜色停止问题：

jsfiddle.net/PKy8B/3 /

有人问这将是理想的结果：

感谢大家的帮助，但看起来这是不可能用上面的透明div和后面的一个，我已经将顶部div更改为不再透明，只是作为“最佳修复”选项。

Answer 1

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

JSFiddle Demo

<强> HTML

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

<强> CSS

.top {
    height:75px;
    background-color: rgba(0, 0, 0, 0.25);
}

.bottom {
    height:75px;
    margin-top: -10px;
    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%);
    border:1px solid black; /* added for visual reference */
    z-index:-1
}

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

Answer 2

你能不能像上一样做到顶端 -

我的意思是 -

如果您在linear-gradient(to bottom div

中添加了bottom

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

做类似的事情

添加此内容 - linear-gradient(to 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%);

在此处查看 - DEMO

我认为你的See More蓝色按钮将是一张图片。所以不会有任何问题。