1

作業中のサイトがありますが、要件の1つは、クライアント側のスクリプト（jQuery / JavaScript）を使用できないことです。そして、私はCSSがあまり得意ではないので、ここで少し立ち往生しています。

単純なdivがあり、「境界線の画像」が必要です。しかし、CSSborder-imageはIE（テスト済み）では機能しないため使用できません。また、上部と下部の2つの異なる画像を取得できないため、background-image:何ができるのか疑問に思っています。 ..

以下はそれがどのように見えるべきかです、矢印のように見えるものは両方とも2つのpngファイルです：

ここに画像の説明を入力してください

これを達成する方法はありますか？1つのdivと2つの画像を使用することで？JavaScriptがなく、ブラウザー間の互換性も維持していますか（ie6 <などのいくつかの例外を除く）？

4

4 に答える 4

2

これは、IE9、Firefox、Chrome、Opera、Safariで動作します

コード：

    <style>
      #Container {
        width: 400px;
        height: 400px;
        margin-left: auto;
        margin-right: auto;
        border:1px solid #000000;
      }


      .boxTop {
        position: relative;
        left: 100;
        top: 100;
        width: 200px;
        height: 10px;
        background-color:#00CC00;
        /*place background image css code here and remove line above*/
      }

      .box {
        position: relative;
        left: 100;
        top: 100;
        width: 200px;
        height: 200px;
        background-color:#CC0000;
      }

      .boxBtm {
        position: relative;
        left: 100;
        top: 100;
        width: 200px;
        height: 10px;
        background-color:#0000CC;
        /*place background image css code here and remove line above*/
      }
    </style>

    <div id="Container">
        <div class="boxTop"></div>
        <div class="box"></div>
        <div class="boxBtm"></div>
    </div>
于 2012-07-22T17:33:45.700 に答える
0

ダーシーの解決策はとても良いです。ボックスdivには3つのdivがあり、中央のdivはコンテンツ用で、他の2つは画像用です（cssプロパティbackground-imageを使用）。

HTMLを変更したくない場合は、css：beforeおよび：afterの 例で遊んでみてください。

于 2012-07-22T17:41:00.860 に答える
0

最初の解決策：gradientsだけを使用します。画像も、余分な要素も、疑似要素もありません。

もちろん、gradientsはIE9以前ではサポートされていないため、別の解決策は複数の背景を使用することです。

IE8以前はCSS3の方法で複数の背景をサポートしていませんAlphaImageLoader filterが、これらのブラウザーのフォールバックとして使用できます。

于 2012-07-22T17:43:33.877 に答える
0

ブロックが修正されheight、width背景を1つの画像とpaddingsに設定した場合。修正されている場合はwidth、@Mrを使用してください。エイリアンの解決策。そして、それがheight水平方向にトリミング画像を修正し、背景を作成している場合repeat-x。widthとが両方ともheight動的である場合は、とにかく2〜3個の追加のdivを使用することをお勧めします（避けたいと思います:before）:after。

于 2012-07-22T17:53:50.480 に答える