3

CSS3 放射状グラデーションを使用してパフォーマンスの高い大きなブロックを実装する方法はありますか? このウェブサイトのように。http://www.medora.ca/wp-content/themes/medora/images/bgNoise4.jpg (3200x1600)

Canvas - 画像生成中に JS をブロックし、タイムアウトを作成します。

CSS3 - FF 13 は大きなグラデーション (3200x1600) でオーバーロードされすぎていました。そのグラデーションが追加されると、タグの単純な CSS3 トランジションでさえ非常に遅くなりました。

SVG - 経験が少なすぎる、あまりテストしない、画像の品質が CSS3 より低かった

VML - IE の場合、未経験

放射状の CSS3 グラデーションを使用してこのような大きなブロックを追加する Chrome では、優れたパフォーマンスが得られると述べました。

目に見える放射状の線なしで放射状のグラデーションを作成するための、CSS3 または canvas の厄介な技術を知っていますか?

リンクの例をいくつか提供していただければ幸いです。

ありがとうございました！

4

1 に答える 1

0

これが私が思いついたものです。まだ大規模なブロックで試したことはありませんが、このブロックでは目に見える放射状の線は見られません:

HTML:

<div id="gradient_div"></div>

CSS:

#gradient_div {
  margin: 0 auto;
  border-radius: 20px;
  width: 500px;
  height: 500px;    
  background-color:rgba(171, 171, 171, 0.1);
  background-image: -moz-radial-gradient(50% 0%, circle cover, rgba(171, 171, 171, 0.3), #242bff 50%);
  background-image: -webkit-radial-gradient(50% 0%, circle cover, rgba(171, 171, 171, 0.3), #242bff 50%);
  background-image: -o-radial-gradient(50% 0%, circle cover, rgba(171, 171, 171, 0.3), #242bff 50%);
  background-image: -ms-radial-gradient(50% 0%, circle cover, rgba(171, 171, 171, 0.3), #242bff 50%);
  background-image: radial-gradient(50% 0%, circle cover, rgba(171, 171, 171, 0.3), #242bff 50%);
}

これは、いじることができる JSFiddle バージョンです: http://jsfiddle.net/Hz8ME/

于 2012-08-13T16:12:47.970 に答える