Html 如何选择渐变过滤器旁边的按钮

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

HTML

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

最后，UI应该是这样的。

请检查。你有两个问题1。设置

按钮

属性

type=“button”

和2

.tag

z-index

应该是

1

。因为您的

按钮是
绝对位置

更新

我更新了文件。我想这会对你有帮助。
一个
标签不见了。
在你代码的末尾

您的容器未关闭，因此无法单击您的按钮

尝试只添加另一个结束标记。
似乎您正在查找
指针事件：无

演示
将
.tag{z-index:0；}
更改为
.tag{z-index:1；}
问题是按钮顶部有渐变。我也尝试过，但如果是这样，我看不到按钮区域的渐变，请查看按钮上是否也有渐变。按钮应该有自己的渐变背景，或者是透明的。看小提琴：我已经改变了，但那是打字错误，我的问题是逻辑问题谢谢，但你的小提琴改变了用户界面，按钮上应该有梯度效果，如果z-指数更大，梯度没有显示，谢谢，但我确切寻找的是伊斯梅尔发现的Farooq@IsmailFarooq How
指针事件：无是一个很好的解决方案。由于
#grad1
中有任何
可点击元素
，因此它将是
无可点击元素
。直到设置
指针事件：默认值用于内部
元素
。检查小提琴是否正确
指针事件：自动将在此处修复
<div class="container">
   <button class="tag">Featured</button>
   <div id="grad1">
</div>

#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;
}