画像マスク効果に関する簡単な説明-webkit-mask_html/css_WEB-ITnose

PS の使い方を知っている子供たちは、写真に特定のマスキング効果を実現できる「マスク」の概念を知っている必要があります。もちろん、ここでは PS のマスクを紹介するのではなく、新しい属性の使用法を紹介します。 CSS3 - webkit -mask を使用して、Web ページで画像マスキング効果を実現します。

-webkit-mask 属性については、初めて見る人も多いかもしれません。はい、この属性は、現在多くのブラウザーでサポートされていない CSS 属性でもあります。この属性は、-webkit- プレフィックスが付いた Google ブラウザと Safari ブラウザでのみ使用できますが、近い将来、他の主流ブラウザでもサポートされると考えられます。

最初に、2 つの方法 (ピクチャ マスク、グラデーション マスク) で記述できる属性値を紹介します。

1. ピクチャ マスク

.demo1 {    background : url("images/logo.png") no-repeat;    -webkit-mask : url("images/mask.png");}

その属性値は、基本的に、背景の構文と同じです。プロパティには、webkit-mask-clip、webkit-mask-position、webkit-mask-repeat が含まれます。

以下はその実装のレンダリングです:

ここで注意する必要があるのは、2 番目の Mask.png の黒い部分の透明度 (アルファ) 値が 1 であることです。これにより、下の画像領域が完全に表示されます。一方、残りの A 透明度 0 (アルファ値) は、その下の画像領域を完全にカバーします。

2. グラデーション マスク

.demo1 {    background : url("images/logo.png") no-repeat;    -webkit-mask : -webkit-gradient(linear, left top, right bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));}

属性値は CSS グラデーションの昔ながらの構文です: -webkit-gradient(, [, ]?, < ; point> [, ]? [, ]*)

新しい構文: -webkit-linear-gradient( [ || ,]? クールなロゴ マスク アニメーション効果を作成し、JS コントロールを使用してマスクを動かすこともできます。レンダリングは次のとおりです:

実装コードは次のとおりです:

$(function(){     $(".mask").mouseover(function(){          var b=0,c=$(this),          d=setInterval(function(){               if(b>parseInt(c.width()+50)){clearInterval(d);}               c.css({"-webkit-mask":"-webkit-gradient(radial, 88 53,"+b+", 88 53, "+(b+15)+", from(rgba(255, 255, 255,1)), color-stop(0.5,rgba(255, 255, 255, 0.2)), to(rgba(255, 255, 255,1)))"});               b++;           },0);     });});

setInterval を使用して、マスク レイヤのグラデーション位置を動的に変更します。 グラデーションの開始位置と終了位置を変更して、さまざまな効果を実現することもできます:

-webkit-gradient(radial, 0 0,"+b+", 0 0, "+(b+15)+", from(rgba(255, 255, 255,1)), color-stop(0.5,rgba(255, 255, 255, 0.2)), to(rgba(255, 255, 255,1)))

いいですね?

ただし、WebKit ブラウザーを除く他のブラウザーはサポートしていません。ブラウザーの互換性に対する高い要件がある場合は、注意して使用してください。ただし、プログレッシブ拡張の意識に沿って、何もしないよりは良いですよね。見えない場合はそうです。

over~ コメントは大歓迎です。