如何选择渐变滤镜旁边的按钮答案

【问题标题】：How to select a button beside the gradient filter如何选择渐变滤镜旁边的按钮
【发布时间】：2017-11-13 18:14:15
【问题描述】：

我遇到了一个将渐变滤镜设置为整个网页的项目。
所以我实现了这样的过滤器。jsfiddle

HTML

<div class="container">
   <button class="tag">Featured</button>
   <div id="grad1">
</div>

CSS

#grad1 {
    height: 200px;
    background: red; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(red, yellow); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(red, yellow); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(red, yellow); /* For Firefox 3.6 to 15 */
    background: linear-gradient(red, yellow); /* Standard syntax (must be last) */
    opacity: 0.5;
}
.container {
   border: 1px solid #DDDDDD;
   width: 200px;
   height: 200px;
   position: relative;
}
.tag {
   float: left;
   position: absolute;
   left: 0px;
   top: 0px;
   background-color: #92AD40;
   padding: 5px;
   color: #FFFFFF;
   font-weight: bold;
}

但问题是在这种情况下按钮不可选择。我不知道如何使按钮起作用。如何使按钮可选择并在按钮上方显示渐变？

最终用户界面应该是这样的。

【问题讨论】：

将.tag {z-index: 0;} 更改为.tag {z-index: 1;} 问题是渐变在按钮上方。
我也试过了，但如果是这样，我在按钮区域看不到渐变，请参阅jsfiddle.net/r6tdc3Lh/2
如果您希望按钮上也有渐变，按钮应该有自己的渐变背景，或者是透明的。见小提琴：jsfiddle.net/wed5ntfo

标签： html css gradient

【解决方案1】：

看来你在找pointer-events: none;

演示http://jsfiddle.net/r6tdc3Lh/5/

【讨论】：

@Ismail Farooq pointer-events: none; 是一个很好的解决方案。因为如果#grad1 中有clickable element，它将是none clickable。直到将pointer-events: default; 设置为内部element。检查小提琴jsfiddle.net/r6tdc3Lh/6
你是对的pointer-events: auto; 子元素将在这里修复它是jsfiddle.net/r6tdc3Lh/7

【解决方案2】：

缺少</div> 标记。在你的代码的末尾。

你的容器没有关闭，所以你的按钮不能被点击。

尝试添加另一个结束标记。

【讨论】：

我改了，但那是错字，我的问题是逻辑问题

【解决方案3】：

检查fiddle。你有两个问题1.设置buttonattributetype="button"和2..tagz-index应该是1。因为你的button 是absolute 位置。

更新

我更新了fiddle。我想它会对你有所帮助。

【讨论】：

谢谢，但是你的小提琴改变了ui，按钮上应该有渐变效果，如果z-index更大，则不显示渐变，
谢谢，但我正在寻找的正是 Ismail Farooq 找到的