私はさまざまな幅と高さのいくつかのDIVのための可変幅と高さの丸い角と粗いエッジを持つ背景画像を作成しようとしています。セクションを使用して可変の高さと幅を持つ背景画像を作成する最も良い方法は何ですか？
開発中のWebページで意味するイメージの例を見ることができますhere。
私にとって最も理にかなっている方法は、Photoshopでイメージをデザインし、2つのセクションを連結し、コーナーの場合は20ピクセル×20ピクセル、側面の場合は20ピクセル×200ピクセルセクションをスプライスすることです。その後、必要な画像の数を最小限に抑えるために、これらの画像を90度、180度、270度回転して再利用することが考えられます。それから私はセクションに細分化されたDIVを作成します。これらのセクションはコーナーのサイズに対応し、コーナーのイメージのバックグラウンドURL（3回転）を持つか、またはサイドセクションの幅または高さが変化する、つまり何でも20pxになります。これらのDIVの幅/高さが200pxより長い場合は、背景イメージが繰り返されます。明らかに、コーナーセクションがどのようにサイドセクションに参加するかに注意を払う必要があります。これは、エッジの粗さのために、完全な結合ではないかもしれませんが、ラフでも問題にならないことを望んでいます多く！画像の中央にあるDIV /セクションは、全体の画像がただ1つの色を使用するので、単色の背景色になります。
これは本当にこれについての最良の方法であるかどうか、もしそうでない場合には、私は疑問に思っています。それがあれば、どのようにコーナー/サイドセクションの回転を処理しますか？私はこれを行うことができるバックグラウンドのプロパティはないと思う。これはjavascriptの仕事ですか？
おかげで、
ニック
おかげで、私はこれになります。私がそれを理解しているように、border-imageプロパティはIEでは動作しません。だから、クロスブラウザーのソリューションで作業するのが最善か、IEのフォールバックを使用してborder-imageプロパティーを使用するのが最善かどうか、そしてもしそうなら、私はIEのフォールバックを考えていますか？ – Nick
多分これは助けになる：http://stackoverflow.com/questions/3567501/border-image-workaround-for-ie – Variant
ありがとう。私は今、border-propertyを使用しています。私はIEのバージョンを動作させることができませんでしたので、IEのための代替CSSスタイルを使用しています – Nick