2

Javascript/CSS で PNG のシルエットを作成する必要があります。これは可能ですか？

私は次のことを試しました: 絶対配置と z-index を使用して、不透明度を下げた PNG を複数回スタックします。これは動作しません。

残念ながら、私は PHP や Javascript や CSS 以外の何かを使用することはできません。

オーバーレイなどのアイデアがいくつかありましたが、その方法がわかりません。任意のヒント？

更新: これは Webkit ブラウザーでのみ機能する必要があるため、Webkit トリックボックスを持参できます。:)

4

2 に答える 2

3

プレーンな HTML/CSS では不可能です。

埋め込み SVG では、不透明度を除くすべてのチャネルを 1 つの色に設定するなどのフィルタを使用して可能です。feColorMatrix

最初に画像を描画し、モードでその上に単色を描画するなど、複合操作<canvas>を使用すると可能です。source-out

IE ではMaskFilterを使用し、MaskFilter を使用して、固定色 (黒など) の上に配置されたマスキング色 (白など) を生成することが可能です。ただし、可変不透明度の滑らかなエッジは失われると思います。

多くのブラウザー スニッフィングと煩わしさになるでしょう。私はそれを避けようとします。

于 2010-01-24T13:16:57.973 に答える
1

これを でタグ付けしたことを考えると、CSS マスクに関するSurfin' Safariブログ投稿webkitを参照する必要があります。

例：これはあなたが望むものですか？

<!doctype html>
<style>
div {
    width: 215px;
    height: 174px;
    background: black;
    -webkit-mask-image: url("http://webkit.org/images/icon-gold.png");
}
</style>
<div></div>
于 2010-01-24T13:21:31.440 に答える