CSSでこのようなエクスペリエンスを作成する方法はありますか？CSSのグラディエントマップでマスクをクリッピングする
https://www.dropbox.com/s/9kid0skuifhr5jj/Screen%20Shot%202016-03-19%20at%2017.33.16.png?dl=0
（＃663897から＃02ccfeへ）の勾配マップとクリッピングマスクが画像に適用があります。
グラデーションの背景でオーバーレイを作成しようとしましたが、それは異なります。私は完全に失われている、インターネット上で何かを見つけることができません。 :(
はありがとう
私はおそらくあなたがこのような何かを探していると思う：！
.container {
width: 500px;
height: 300px;
position: relative;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: -moz-linear-gradient(left, #02ccfe 0%, #663897 100%), url(http://placekitten.com/g/500/300);
background: -webkit-linear-gradient(left, #02ccfe 0%, #663897 100%), url(http://placekitten.com/g/500/300);
background: linear-gradient(to right, #02ccfe 0%, #663897 100%), url(http://placekitten.com/g/500/300);
background-blend-mode: hard-light;
}
h1 {
color: #FFF;
position: relative;
top: 25%;
left: 50px;
}<div class="container">
<div class="overlay"></div>
<h1>
Lorem Ipsum
</h1>
</div>が、これは、インターネットエクスプローラ（browser support）で動作しないので注意してください
これは私が探しているものではありません。私はもう一つの写真を見せます。 http://tinyurl.com/hkw9dwzご覧のとおり、元の画像の暗い部分は紫色で、明るい色は青みがかった色です。 ここにPhotoshopのレイヤーの写真があります http://tinyurl.com/z3ac98h 私はPhotoshopプロではありませんが、間違っているかもしれませんが、白いレイヤのマスクとグラデーションマップがあります。ブレンドモードではありません。 – Frelseren
画像のクリッピングマスクが出力の色に影響していません。これは、画像を最下層に指定された形状に「クリッピング」または「クロッピング」しています。上のレイヤーは調整レイヤーで、おそらく色が変わります。レイヤーの上を見ると、 "screen"や "hard-light"のように設定されているブレンドモードのドロップダウン（http://i.stack.imgur.com/PHhnM.png）が表示されます。私が上にシミュレートしようとしている効果。色が正しくない場合は調整してください。私はあなたにそのテクニックを示しました。あなたのニーズに合わせて調整する必要があります。 – Turnip
ブレンドモードはありません。それはCSSで行うことはできないようだ。答えてくれてありがとう！ – Frelseren
本当に "クリッピングマスク"を意味し、 "ブレンドモード"を意味しませんか？https://jsfiddle.net/3rror404/tonuau z4/1/ – Turnip