Webページでアルファを使用して背景テクスチャをレンダリングする方法はありますか?グラデーションの上にテクスチャを配置して、グラデーションが透けて見えるようにします。
私はこれにキャンバスを使用していません(他のアニメーション効果にはキャンバスを使用していますが)
これは、CSS3の複数の背景とCSS3のグラデーションを使用して実現できます。これはこのテーマに関する良い記事です。
編集:明確にするために、基本的にオブジェクトに2つの背景を定義する必要があります。1つ目はグラデーションで、2つ目はアルファテクスチャです。
これには CSS3 は必要ありません。でシームレスな背景タイルを使用しhtml
、 でアルファ グラデーションを使用しますbody
。
html {background: #fff url(path/to/bg-tile.png) repeat 0 0;}
body {background: transparent url(path/to/gradient.png) repeat-x 0 0;}
大きなdivを背景として使用し、グラデーションとpngをdiv内に追加してから、cssを使用してサイズ変更と配置を行うことができます