CSS：HTML背景の繰り返しタイルを重ねる方法は？

Question

私は自分のウェブサイトに金属ブラシのような肌を作成しています。
金属製のルックをシームレスに水平に伸ばしたいと思っています。その一部を繰り返すと、背景画像の左端と右端の間に目に見える差があるため、ページは不規則に見えます。その代わりに、左右の辺を少し透明にして繰り返しタイルを重ねるようにして、シームレスな金属の背景の錯覚を作り出すことを考えました。しかし、どのようにタイルを重ね合わせるのですか？

Answer 1

要素は今CSS3で複数の背景画像を持つことができます。すべてのブラウザで動作しますが、最も新しいものではないだろう

http://www.css3.info/preview/multiple-backgrounds/

を。

つまり、実際には、適切にタイリングしている背景イメージを作成することです。私が使用する方法は、お使いの画像編集ソフトで開き、そしてそれは今より広い画像サイドバイサイドですので、それを複製することです：

+----------------------++---------------------+ 
    |      ||      | 
    |      ||      | 
    +----------------------++---------------------+ 

選択（クローンツール、スマッジツール、絵筆などのあなたのツールを使用して。）中央で合っている2つの端を一緒にブレンドして、滑らかな遷移があるようにします。終了したら、...

      +----------+ 
          |Copy this | 
    +----------------------+|----------|----------+ 
    |      ||   |   | 
    |      ||   |   | 
    +----------------------+|----------|----------+ 
          |   | 
          +----------+ 

を右画像の左半分をコピーして、第1の画像の左側に戻ってそれを移動：

+-----------+ 
    |paste here | 
    |-----------|----------++---------------------+ 
    |   |   ||      | 
    |   |   ||      | 
    |-----------|----------++---------------------+ 
    |   | 
    +-----------+ 

は、その後、あなたが重複して右半分を削除し、適切な水平方向のタイリングの背景画像が残されます。