私はそれがミックスブレンドモードのCSSプロパティをサポートしていませんので、しかし、それは、IEで動作しない、純粋なCSSに似た何かをすることができました: http://caniuse.com/#feat=css-mixblendmode
コードスニペットは以下の通りです。誰かを助けることを願っています。
<html>
<head>
<style>
.gradient {
position: relative;
content: '';
display: block;
width: 260px;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(140,198,63,1)), color-stop(100%, rgba(30,71,146,1)));
background: -webkit-linear-gradient(left, rgba(140,198,63,1) 0%, rgba(30,71,146,1) 100%);
background: -moz-linear-gradient(right, rgba(140,198,63,1) 0%, rgba(30,71,146,1) 100%);
background: -ms-linear-gradient(right, rgba(140,198,63,1) 0%, rgba(30,71,146,1) 100%);
background: -o-linear-gradient(right, rgba(140,198,63,1) 0%, rgba(30,71,146,1) 100%);
background: linear-gradient(to right, rgba(140,198,63,1) 0%, rgba(30,71,146,1) 100%);
}
.gradient p {
color: #000;
background: #fff;
mix-blend-mode: lighten;
}
</style>
</head>
<body>
<div class="gradient">
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
</div>
</body>
</html>
すごいです....しかし、そのような恥を唯一のWebkitブラウザ....私はIEとFirefoxの周りの任意の回避策があるのだろうか?それに感謝します。 – ragebunny
うまくいけば、他のブラウザもこれらの機能を実装し始めますが、それまでは不幸にもWebkitしかありません。 – joshnh