0

中間色が異なる複雑なグラデーションを含む画像を取得しました。height: 1px; width:100px

背景色の div ブロックを取得しました。

div ブロックの背景色をグラデーション イメージから取得したいと考えています。

例:.div50クラスは50th、グラデーション イメージのピクセルを背景として持ちrepeat-xますrepeat-y。

これを達成する最良の方法は何ですか? ありがとう ！

4

2 に答える 2

1

現在、これに対するクロスブラウザ ソリューションはないようです。

w3 は、「画像フラグメント」を使用できないというこの問題に対する優れた解決策を開発しているようです。彼らは、実際の画像呼び出し内で画像をトリミングする
ことを提案しています。
使用する代わりに:

background-image: url('swirl.png'); /* old UAs */

彼らは提案します：

background-image: image('sprites.png#xywh=10,30,60,20'); /* new UAs */

これはまだ開発中のため、あまり役に立たないかもしれません...

今すぐ解決策が必要な場合は、Mozilla を使用してください。

background: -moz-image-rect(url('Image.jpg'), 0, 1, 1, 0);

これにより、画像の最初のピクセル (左上) が取得されます。

-moz-image-rect次の 5 つの値を取ります。

  1. 画像の URL
  2. 上 - 上から始まる距離。
  3. 右 -左から終了するまでの距離。
    • 幅を指定します。
    • 常に "Left" よりも大きくする必要があります。
  4. 下 - 上から終了するまでの距離。
    • 高さを指定します。
    • 常に "Top" よりも大きくする必要があります。
  5. Left - 左から開始する距離。

例 Mozilla ブラウザーでのみ表示可能

この画像を使用して作成:
1px 虹

-moz-image-rect(url('Image.jpg'), 10, 100, 25, 50);

画像: Image.jpg
この画像は、高さ 15 ピクセル (10 番目のピクセルの直後から 25 番目のピクセルまで)、幅 50 ピクセル (50 番目のピクセルの直後から 100 番目のピクセルまで) にトリミングされます。

画像を必要としないやや単純な解決策は、インスタント スポイトなどのピクセル カラー ファインダーを使用して、1x100 画像内のすべてのピクセルを表すために必要な 100 色を計算することです。これらの色を使用すると、クロスブラウザーで機能する背景を非常に簡単に作成できます。

お役に立てれば！

于 2013-08-05T19:40:48.313 に答える