Jquery 灰度图像上的梯度css

我有下面的代码，一个灰度背景的图像和包含图像的div，它有一个梯度

我的问题是，梯度也出现在灰度中

我需要的梯度是上面的灰度图像

有什么想法吗

<div id="contentVisi" class="overlaySeg"></div>

#contentVisi {
    background-image: url("images/visitantes.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 586px;
    -webkit-filter: grayscale(100%);
}
.overlaySeg::before {
    background: -moz-radial-gradient(74% 27%, circle cover, rgba(227,79,120,0) 0%, rgba(227,79,120,0.29) 29%, rgba(227,79,120,0.61) 61%, rgba(227,79,120,1) 100%);
    background: -webkit-radial-gradient(74% 27%, circle cover, rgba(227,79,120,0) 0%, rgba(227,79,120,0.29) 29%, rgba(227,79,120,0.61) 61%, rgba(227,79,120,1) 100%);
    background: -o-radial-gradient(74% 27%, circle cover, rgba(227,79,120,0) 0%, rgba(227,79,120,0.29) 29%, rgba(227,79,120,0.61) 61%, rgba(227,79,120,1) 100%);
    background: -ms-radial-gradient(74% 27%, circle cover, rgba(227,79,120,0) 0%, rgba(227,79,120,0.29) 29%, rgba(227,79,120,0.61) 61%, rgba(227,79,120,1) 100%);
    background: radial-gradient(circle at 74% 27%, rgba(227,79,120,0) 0%, rgba(227,79,120,0.29) 29%, rgba(227,79,120,0.61) 61%, rgba(227,79,120,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e34f78', endColorstr='#e34f78', GradientType=1 );
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 586px;
    content: '';
    position: absolute;
    opacity: 0.6;
    top: 0;
    z-index: 3;
}

#contentVisi{
背景图片：url（“images/visitantes.jpg”）；
背景重复：无重复；
背景尺寸：封面；
宽度：100%；
高度：586px；
-webkit过滤器：灰度（100%）；
}
.overlaySeg：：之前{
背景：莫兹径向梯度（74%27%，圆形覆盖，rgba（227,79120,0）0%，rgba（227,79120,0.29）29%，rgba（227,79120,0.61）61%，rgba（227,79120,1）100%）；
背景：-webkit径向梯度（74%27%，圆形覆盖，rgba（227,79120,0）0%，rgba（227,79120,0.29）29%，rgba（227,79120,0.61）61%，rgba（227,79120,1）100%）；
背景：-o-径向梯度（74%27%，圆形覆盖，rgba（227,79120,0）0%，rgba（227,79120,0.29）29%，rgba（227,79120,0.61）61%，rgba（227,79120,1）100%）；
背景：-ms径向梯度（74%27%，圆形覆盖，rgba（227,79120,0）0%，rgba（227,79120,0.29）29%，rgba（227,79120,0.61）61%，rgba（227,79120,1）100%）；
背景：径向梯度（74%27%，rgba（227,79120,0）0%，rgba（227,79120,0.29）29%，rgba（227,79120,0.61）61%，rgba（227,79120,1）100%）；
过滤器：progid:DXImageTransform.Microsoft.gradient（startColorstr='#e34f78'，endColorstr='#e34f78'，GradientType=1）；
背景重复：无重复；
背景尺寸：封面；
宽度：100%；
高度：586px；
内容：''；
位置：绝对位置；
不透明度：0.6；
排名：0；
z指数：3；
}

将您的div包装在另一个div中，并将彩色渐变添加到该div中

HTML:

---

代码笔演示：

将您的div包装在另一个div中，并将彩色渐变添加到该div中

HTML:

代码笔演示：

<div class="overlaySeg"><div id="contentVisi"></div></div>

#contentVisi {
    background-image: url("http://s3.amazonaws.com/colorcombos-images/users/1/color-schemes/color-scheme-375-main.png?v=20120505082910");
    background-repeat: no-repeat;
    background-size: cover;
    width: 487px;
    height: 290px;
    -webkit-filter: grayscale(100%);
}
.overlaySeg {
  position:relative;
  display:inline-block;
}
.overlaySeg:after {
    background: -moz-radial-gradient(74% 27%, circle cover, rgba(227,79,120,0) 0%, rgba(227,79,120,0.29) 29%, rgba(227,79,120,0.61) 61%, rgba(227,79,120,1) 100%);
    background: -webkit-radial-gradient(74% 27%, circle cover, rgba(227,79,120,0) 0%, rgba(227,79,120,0.29) 29%, rgba(227,79,120,0.61) 61%, rgba(227,79,120,1) 100%);
    background: -o-radial-gradient(74% 27%, circle cover, rgba(227,79,120,0) 0%, rgba(227,79,120,0.29) 29%, rgba(227,79,120,0.61) 61%, rgba(227,79,120,1) 100%);
    background: -ms-radial-gradient(74% 27%, circle cover, rgba(227,79,120,0) 0%, rgba(227,79,120,0.29) 29%, rgba(227,79,120,0.61) 61%, rgba(227,79,120,1) 100%);
    background: radial-gradient(circle at 74% 27%, rgba(227,79,120,0) 0%, rgba(227,79,120,0.29) 29%, rgba(227,79,120,0.61) 61%, rgba(227,79,120,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e34f78', endColorstr='#e34f78', GradientType=1 );
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%;
    content: '';
    position: absolute;
    opacity: 0.6;
    top: 0;
    z-index: 3;
}