我有以下代码,灰度背景图像和包含图像的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;
}
答案 0 :(得分:3)
将div包裹在另一个div中,并将彩色渐变添加到该div中。
HTML:
<div class="overlaySeg"><div id="contentVisi"></div></div>
CSS:
#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;
}
Codepen演示:http://codepen.io/saqibamin/pen/jWGJEB