最新の Web サイトに CSS 不透明度グラデーション効果を作成するには?

CSS 不透明度グラデーション効果の実現

動的な背景色を持つ最新の Web サイトの場合、提供されている例と同様の不透明度グラデーション効果を作成できます。

白いオーバーレイを使用するのとは対照的に、CSS マスク プロパティは、より汎用性の高いソリューションを提供します。コツは、終点を透明に設定して (アルファ値を介して) グラデーションそのものであるマスクを定義することです。

<code class="css">p {
    color: red;
    -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, 
    from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
}</code>

マスク プロパティのサポートは現在、Chrome、Safari、そしてオペラ。 Firefox は現在、SVG マスクのみをサポートしています。

しかし、興味深い開発により、Internet Explorer を除くすべての主要なブラウザが、前述のマスク プロパティをすべてサポートするようになりました。これにより、Web 全体に CSS 不透明度グラデーションをシームレスに実装できます。

無地の背景を使用した完全なデモについては、次のコードを参照してください:

<code class="css">p  {
  color: red;
  font-size: 30px;
  -webkit-mask-image: linear-gradient(to left, rgba(0,0,0,1), rgba(0,0,0,0)), linear-gradient(to right, rgba(0,0,0,1), rgba(0,0,0,0));
  -webkit-mask-size: 100% 50%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: left top, left bottom;
  }

div {
    background-color: lightblue;
}</code>

以上が最新の Web サイトに CSS 不透明度グラデーション効果を作成するには?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。