隐藏部分div下的transpartent div

好吧，我有2个div，上面的div是透明的，每个角落都有一个边框半径，下面有一个使用纯色背景渐变的div，并且已经被推起来在透明div下使用负边距和Z-index将其放在上面的div。隐藏部分div下的transpartent div

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

我这样做是因为我需要保持在第二个图像中突出显示的角。

Problem example Problem corners

任何帮助是极大的赞赏。

颜色停止使用问题出在这里：

jsfiddle.net/PKy8B/3/

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

Desired Result

谢谢大家了帮助，但看起来这是不可能做到这一点与上面和后面的一个透明的div，我已经改变了顶部div不再是透明的，只是作为一个“最好的修复”选项。

来源

2014-07-11 Sam

发布您的代码并创建一个http://www.jsfiddle.net。谢谢 – redditor

你想删除圆角，因为你在红圈？ –

不是。div是transaprent的，对此你没有太多可以做的事情。 ** **可以做的不是在**之后**开始背景渐变直到** div使用颜色停止清除“悬垂”。 –

不幸的是，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 
}

注意：颜色停止必须是一样的上午'mount您已经移动底部DIV

来源

2014-07-11 11:30:37

正如我所说： “我这样做是因为我需要保留在第二个图像中突出显示的角落。” – Sam

然后我想我们必须重新思考。 –

http://jsfiddle.net/PKy8B/3/ – Sam

你可以做同样的，就像你做顶 -

顶我的意思是 -

如果已经添加linear-gradient(to bottom在bottom DIV

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

添加此 - 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%);

CHECK在这里 - DEMO

，我认为你的See More蓝色按钮，将是一个图像。所以不会有问题。

来源

2014-07-11 11:58:51

@Sam - 你的愿望结果是什么？可以发布任何快照吗？ –

查看原文post bottom image。 – Sam

隐藏部分div下的transpartent div

回答

相关问题