3

画像があり、各画像の 2 つの角度を削除したい。削除された部分は透明である必要があり、これは修正できなかった部分です。ここに私がやりたいことを示す2つの画像があります：

これは空の画像です。見せたい部分は白です。青色の部分は、ドキュメントの背景のグラデーション カラーを示しています。

基本イメージ

これは私が最後に得るべきものです。青色の部分は、ドキュメントのグラデーション カラーから透明になっています。

それはどのように見えるべきか

誰でもアイデアがありますか？

4

2 に答える 2

0

私のコード以外の答えが気に入らない人もいるかもしれませんが、画像自体でそれを行うことはできますか？これを提案することを嫌がらないでください、しかし時々コードはすべてを解決しません。

  1. 画像をPNGとして保存します。
  2. Photoshopを使用している場合は、作業しているレイヤーが「背景」レイヤーではないことを確認してください。
  3. マーキスツールを消去/使用して、画像の透明にしたい部分を削除します。マーキスツールのエッジをぼかして「フェード」させることができます。
  4. Photoshopまたはその他の編集プログラムの設定に応じて、「透明」セクションは灰色と白の市松模様になります。
  5. 画像をPNGとして保存し、コード化されたマスクの代わりに使用します。

確かに、これは、画像を動的に読み込んでいる場合や、画像をマスクするためにコードに依存している他の理由がある場合は機能しませんが、機能するはずです。初期のバージョンのIEにはPNGに関するいくつかの問題がありますが、現在のプロジェクトではIE9、IE8、またはIE7で問題が発生していません。

于 2012-10-25T14:23:28.540 に答える
0

Webkit ブラウザでは、mask-box-image. image-mask クラスを使用mask-box-imageして画像を div に配置し、透明な png で使用します

.image-mask {
  -webkit-mask-box-image: url(your_mask.png);
}

常に素晴らしい CSS Tricks Web サイトに優れた記事があります - http://css-tricks.com/webkit-image-wipes/

恐れ入りますが、これは Webkit のみです。

于 2012-09-11T10:52:48.933 に答える