35

<div>透明であるだけでなく、Photoshopの乗算モードでブレンドされたように見えるように、Webページに赤い長方形の要素を配置したいと思います。

<div>があるので、そのposition: fixed下のコンテンツはすぐに変更されます。

HTML5 / CSS3 / canvas / SVGトリックでそれは可能ですか？

4

10 に答える 10

27

あるHTMLCanvasコンテキストから別のコンテキストにPhotoshopスタイルのブレンドモードを実行するための、別個の軽量のオープンソースライブラリを作成しました：context-blender。使用例は次のとおりです。

// Might be an 'offscreen' canvas
var over  = someCanvas.getContext('2d');
var under = anotherCanvas.getContext('2d');

over.blendOnto( under, 'screen', {destX:30,destY:15} );

現在サポートされているブレンドモードなどの詳細については、 READMEを参照してください。

これを使用して、あるキャンバスから別のキャンバスへの乗算を実行できますが、標準のHTML要素を超えることはできません。

于 2010-12-03T22:53:56.240 に答える
12

いいえ（ネイティブではありません）が、まもなく登場します：http: //blogs.adobe.com/webplatform/2012/04/04/bringing-blending-to-the-web/

于 2012-04-16T03:21:03.363 に答える
7

http://media.chikuyonok.ru/canvas-blending/にあるこのデモを見て、canvasでこれを行う方法を確認することもできます。

ブレンディングモードの数式とその適用方法については、ソースを確認してください（数式はpixasticやcontext-blenderよりもはるかに読みやすくなっています）。

于 2011-09-15T21:08:45.320 に答える
2

これはHTML5ではありませんが、あなたが求めているものに私が見つけることができる限り近いものです。

Javascriptブレンディングモード（OpenGL）。

Photoshopのような「ブレンドモード」は、言語が別の方向に急変しない限り、純粋なHTMLだけでエミュレートできるとは思いません。しかし、これを行うためのより簡単な方法を見るのは素晴らしいことです。

于 2010-11-25T12:54:52.093 に答える
2

私もそうすることにとても興味があります。ビジュアルデザイナーのためにコーディングした多くのレイアウトでそれを使用できたはずです。このスレッドの他の投稿とは別に、OpenGlまたはCanvasを使用せずに、現在Firefox4でのみこれを行う方法があります。それはSVGフィルターの使用によるものです。当然のことながら、WebkitやChromeのネグリジェでも使用されていますが、まだ何も機能していません。

ここにいくつかのデモと説明があります：

ブレンドモードに近い私見の何かは、今のところ達成するのが非常に難しいです。feConvolveMatrix、、、feSpecularLightingまたはに関する参照を見つけるのは非常に困難feColorMatrixであり、例を理解することは不可能です。彼らは働くことができましたが、私は方法がわかりません。

EffectGamesのようなものが提案されたらいいのにと思います：

div.sprite {
   position: absolute;
   z-index: 2;
   composite: add;
}

これは、より良いアプローチです。たぶん、そこに数学を学んだ忍者が、私たちにそれをする自由を与えるかもしれません。

編集：正確にブレンドモードを実行するためのより簡単なSVG仕様があります。しかし、私がテストしたブラウザーでこれが機能しているものはありません（FF4、IE9、Opera11、Webkit Nightly）：http ://dev.w3.org/SVG/modules/compositing/master/SVGCompositingPrimer.html-しかし、これは、HTML-DOM要素で使用できるようになります。

于 2011-04-28T06:42:31.013 に答える
1

これは私が見た中で最も近いものであり、はい、すべてのアセットはキャンバスにある必要があります。Internet Explorerはまだリリースされていないバージョン9でcanvasのサポートを開始するため、IE <9をサポートする必要がある場合は、回避策を使用する必要があることに注意してください。

于 2011-01-20T15:51:53.563 に答える
1

Chrome Canaryにリリースされたため、まもなくリリースされる予定です。http://blogs.adobe.com/webplatform/2013/04/23/all-blend-modes-for-css-fragment-shaders-have-landed/

于 2013-06-05T10:11:58.910 に答える
1

単純なCSS（Canvasなし）ですでに使用できます。例：

mix-blend-mode: 'multiply'

Internet Explorerはそれをサポートしていないかもしれませんが、他のブラウザはサポートしています。

https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode

于 2015-08-04T20:05:36.000 に答える
0

関係する画像と目的の正確な効果によっては、画像とCSSグラデーションをクリエイティブに重ねて、目的の効果を実現できる場合があります。

http://jonathonhill.net/2012-04-23/blending-css-gradients-like-photoshop/

于 2012-04-23T21:48:05.967 に答える
0

http://canvasquery.com/のcanvasを使用してgimp/photoshopで知られている最も一般的なブレンドモードを実装しましたが、relatimeには適していません。

これは、キャンバスにネイティブブレンドモードが導入されると変更されます

https://dvcs.w3.org/hg/FXTF/rawfile/tip/compositing/index.html#blendingseparable

于 2013-01-26T21:11:50.830 に答える