問題タブ [css-mask]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
css - 長方形の透明グラデーション CSS3 を作成するには?
古いものと同じように、CSS3 の長方形のグラデーションを作成しようとしています:
残念ながら、mask-imageプロパティ（楕円形のものを実現するために使用したもの）には、長方形のグラデーションオプションがありません。
(CSS3 スニペット以前)
(CSS3で再現できたのは最初の3枚だけでした)
html - CSS または SVG でボーダー画像を 100% 忠実に再現する方法はありますか?
ここで私のデモ: https://codepen.io/joondoe/pen/MWwmGwG?editors=0100
私の例では CSS を使用していますが、SVG を使用したソリューションも受け入れています。
内部にコンテンツを埋めるボーダー画像を作成することができました。今、100% 滑らかな境界線画像を作成できるかどうか疑問に思っていますか? つまり、元のボーダー画像を自動的に再現するボーダー画像、またはプログラムで可能な限り近い画像です。
私のデモでは、かなり問題ないことがわかりますが、元の境界線の画像に比べてエイリアシングとラグがまだいくつかあります. 元のボーダー画像は次のとおりです。
ここに私のコード：
CSSまたはSVGのプログラム機能のみを使用して元の境界線の画像を再現する方法はありますか?パーセンテージ、塗りつぶしプロパティなどすべて?
編集： このソリューションのTermani Afifに感謝します。 Termani Afif の anwser の画像にピクセルのギャップがあったことに驚いたので、おそらく私のボーダー画像とマスクはそのように言うのに自由ではなかったと思いました。だから私は他の画像で再構成しました、そしてそれは非常にうまく機能します、ここでデモ: codepen.io/joondoe/pen/GRJmBQK?editors=0100
html - マスクされた画像が z-index を無視するのはなぜですか?
CSSでマスクする画像があります。このマスクされた画像の上にテキストが必要です。z-index は無視されているようです。
問題を示すために、コードで小さな例を作成しました。z オーダーがマスクに依存していることを確認するには、オレンジ色の要素にカーソルを合わせてマスクの設定を解除します。
よろしくお願いいたします。
ティー