1

こんにちは、ヘッダー行を作成するために、CSS の背景で何か違うことを試しています。ラインが同じサイズの 5 つの部分で構成され、各部分が異なる色になるように設定したいと思います。コードを設定した例ここに画像の説明を入力 を次に示しますが、背景が正しく表示されません。コードは下にあります。どんな助けでも大歓迎です、ありがとう！

HTML:

<div id="div-line">
    <div class="blockOne"></div>
    <div class="blockTwo"></div>
    <div class="blockThree"></div>
    <div class="blockFour"></div>
    <div class="blockFive"></div>
</div>

CSS:

    #div-line {
    width:100%;
    height:5px;
}

.blockOne {
    width:20%;
    background-image:url(../images/orangeBlock.png);
    background-repeat:repeat-x;
}

.blockTwo {
    width:20%;
    background-image:url(../images/blueBlock.png);
    background-repeat:repeat-x;
}

.blockThree {
    width:20%;
    background-image:url(../images/darkOrangeBlock.png);
    background-repeat:repeat-x;
}

.blockFour {
    width:20%;
    background-image:url(../images/orangeBlock.png);
    background-repeat:repeat-x;
}

.blockFive {
    width:20%;
    background-image:url(../images/BlueBlock.png);
    background-repeat:repeat-x;
}
4

4 に答える 4

3

DIV要素 をフロートさせて高さを追加する必要があります。ワーキングデモ

blockHTMLに一般的な CSS クラスを追加しました。

<div id="div-line">
    <div class="block blockOne"></div>
    <div class="block blockTwo"></div>
    <div class="block blockThree"></div>
    <div class="block blockFour"></div>
    <div class="block blockFive"></div>
</div>

微調整された CSS:

    #div-line {
       width:100%;
       height:5px;
    }

    .block {
      height:100%;
      float:left;
      width:20%;  
    }

    .blockOne {
       background-color:red;   
    }

    .blockTwo {
        background-color:black; 
    }

    .blockThree {
        background-color:red; 
    }

    .blockFour {
            background-color:black; 
    }

    .blockFive {
           background-color:red; 

    }
于 2013-10-06T14:16:18.807 に答える
1

backgroundこれは、 for colorを使用して実現できます。divが表示されない理由は、divに高さを与える必要があり、左にフロートする必要があるためです。

#div-line div {
    float:left;    
    }

#div-line {
    width:100%;
    height:5px;
   }

.blockOne {
    width:20%;
    height:100%;
    background:#00FFFF;
    }

.blockTwo {
    width:20%;
    height:100%;
    background:#FFA500;
    }

.blockThree {
    width:20%;
    height:100%;
    background:#00FFFF;
    }

.blockFour {
    width:20%;
    height:100%;
    background:#FFA500;
    }

.blockFive {
    width:20%;
    height:100%;
    background:#00FFFF;
    }

作業サンプルはこちら.

于 2013-10-06T14:20:48.253 に答える
0

background-color を使用できる背景画像を使用する理由は何ですか?

背景色を使用すると、少なくともサーバーの負荷を軽減できます。

.blockN {
 width: 20%;
 background-color: #0094ff; // or your color
}
于 2013-10-06T14:13:14.703 に答える
0

このようなことをしてください

.blockOne {
width:20%;
background-image:url(images/orangeBlock.png);
background-repeat:repeat-x;
}

.blockTwo {
width:20%;
background-image:url(images/blueBlock.png);
background-repeat:repeat-x;
}

.blockThree {
width:20%;
background-image:url(images/darkOrangeBlock.png);
background-repeat:repeat-x;
}

.blockFour {
width:20%;
background-image:url(images/orangeBlock.png);
background-repeat:repeat-x;
}

.blockFive {
width:20%;
background-image:url(images/BlueBlock.png);
background-repeat:repeat-x;
}

また

.blockOne {
width:20%;
background-image:url(./images/orangeBlock.png);
background-repeat:repeat-x;
}

.blockTwo {
width:20%;
background-image:url(./images/blueBlock.png);
background-repeat:repeat-x;
}

.blockThree {
width:20%;
background-image:url(./images/darkOrangeBlock.png);
background-repeat:repeat-x;
}

.blockFour {
width:20%;
background-image:url(./images/orangeBlock.png);
background-repeat:repeat-x;
}

.blockFive {
width:20%;
background-image:url(./images/BlueBlock.png);
background-repeat:repeat-x;
}

あなたがやろうとしていることはbackground-image:url(images/orangeBlock.png)、Linuxで使用されています。

于 2013-10-06T14:30:12.180 に答える