divの背景画像ショーアップが、背景色はしていません

https://stackoverflow.com/questions/1785729

21-09-2019
|

質問

私はマイナーなCSSの問題を抱えています。

私は、層状のdivのシリーズを持っていると私はdivのクラスのスタイルを設定して、彼らはすべての（パディング、フォントの色など）に表示されます。しかし、背景色しません重ねるのdivのための仕事ます。

テストとして、私は、国境や境界線スタイルを設定しようとした、と彼らはすべての境界線の色を除いて、それは現れなかった、としても働いており、余分なスタイリングとの境界線が黒に残っています。

はそれぞれのdivは、固有のIDを有し、そして背景色が動作していないものは、コンテナDIVに（並んで）ネストされています。私は、ネストされたdiv要素は親のdivの背景色を服用している場合を理解しようとしてきたが、私は、親foのオーバーフローを変更しようとしました、そして、それはいずれかが影響を与えていませんでした。

I回避正しい背景色の1×1ピクセルJPGを作成し、仕事のdivの背景画像を設定するように。しかし、それはハックません、と私は知っオフは良いよ、なぜ、すべてのスタイル要素ワーク、背景色を除きます。

私は誰も私を助けることができる場合、私はそれをお願い申し上げ、私は十分に自分の状況を説明してきました願っています。

（また、添加物として、Iが書き込みコードにDreamweaverの使用と背景色は、プレビューモードで表示するが、Firefoxの、クロム、またはIEに表示されない）

要求されたコードます：

      <div id="longBox">
        <div id="specialLable"> Rent Specials &amp; promotions</div><!--end specialLable-->
        <div id="promoMain"> 
        <div id="proHeader">Alhambra Village Fall Special:</div><!--end proHeader-->
        <div id="proDate">Expires: Date</div><!--end proDate-->
        <div id="clear"></div>
        <div id="protext">This is where the details go</div><!--end protext-->
        <div id="promoConditions"><br />Limited availability. All promotions subject to change. Not good with other offers or promotions unless specified.</div><!--end promoConditions-->
        <div id="proContact">Request an Appointment</div><!--end proContact-->
        </div><!--end specialLable-->
      </div><!--end longBox-->

#longBox{
width:713px;
height:225px;
background-color:#FFFFFF;
float:left;
margin:1.2em 0 0 .7em;
}

#specialLable{
background-image:url(../images/01titleBar.png);
margin: .5em .5em .5em .5em;
width:689px;
height:30px;
font-size:1.2em;
font-weight:bold;
text-transform:uppercase;
color:#667b90;
padding:3px 0 0 6px;
}


#promoMain{
margin: 0 .5em .5em .6em;
background-color:#ced5da;
height:166px
}

#proHeader{
font-size:11px;
text-align:left;
font-weight:bold;
text-transform:uppercase;
color:#CC6666;
float:left;
padding:.3em .6em .3em .6em;
margin:.6em 0 0 .6em;
background-image:url(/images/images/bgwhite.jpg);
background-repeat:repeat;
width:503px;
}
#proDate{
font-size:11px;
text-align:left;
font-weight:bold;
text-transform:uppercase;
background-image:url(/images/images/bgwhite.jpg);
background-repeat:repeat;
color:#CC6666;
float:right;
width:150px;
padding:.3em .6em .3em .6em;
margin:.6em .6em .6em 0;
}

#protext{
font-size:11px;
text-align:left;
margin:0 .6em 0 .6em;
height:80px;
background:ffffff;
padding:0 0 0 .6em;
background-image:url(/images/images/bgwhite.jpg);
background-repeat:repeat;
}

#promoConditions{
font-size:9px;
text-align:left;
line-height:100%;
float:left;
padding:0 .6em 0 .6em;
margin:.6em 0 0 .6em;
width:503px;
}

#proContact{
font-size:11px;
text-align:left;
font-weight:bold;
text-transform:uppercase;
background-image:url(/images/images/bgwhite.jpg);
background-repeat:repeat;
color:#CC6666;
float:right;
width:150px;
padding:.3em .6em .3em .6em;
margin:.6em .6em 0 0;
}

解決

彼らは子供に定義された新しいはattribsであるため、

の画像が作業している理由があります。親はあなたが継承構造から抜け出すようになります確かに仕事の1x1色pxelハックを使用して、BGのためのIMGがありませんでした。いずれにせよます：

次のことを試してみてください

     #longBox{
        width:713px;
        height:225px;
        background-color:#FFFFFF;
        float:left;
        margin:1.2em 0 0 .7em;
        }

    div#specialLable{
    background-image:url(../images/01titleBar.png);
    margin: .5em .5em .5em .5em;
    width:689px;
    height:30px;
    font-size:1.2em;
    font-weight:bold;
    text-transform:uppercase;
    color:#667b90;
    padding:3px 0 0 6px;
    }


    div#promoMain{
    margin: 0 .5em .5em .6em;
    background-color:#ced5da;
    height:166px
    }

    div#proHeader{
    font-size:11px;
    text-align:left;
    font-weight:bold;
    text-transform:uppercase;
    color:#CC6666;
    float:left;
    padding:.3em .6em .3em .6em;
    margin:.6em 0 0 .6em;
    background-image:url(/images/images/bgwhite.jpg);
    background-repeat:repeat;
    width:503px;
    }

div#proDate{
    font-size:11px;
    text-align:left;
    font-weight:bold;
    text-transform:uppercase;
    background-image:url(/images/images/bgwhite.jpg);
    background-repeat:repeat;
    color:#CC6666;
    float:right;
    width:150px;
    padding:.3em .6em .3em .6em;
    margin:.6em .6em .6em 0;
    }

div#protext{
    font-size:11px;
    text-align:left;
    margin:0 .6em 0 .6em;
    height:80px;
    background: #ffffff;
    padding:0 0 0 .6em;
    background-image:url(/images/images/bgwhite.jpg);
    background-repeat:repeat;
    }

    div#promoConditions{
    font-size:9px;
    text-align:left;
    line-height:100%;
    float:left;
    padding:0 .6em 0 .6em;
    margin:.6em 0 0 .6em;
    width:503px;
    }

    div#proContact{
    font-size:11px;
    text-align:left;
    font-weight:bold;
    text-transform:uppercase;
    background-image:url(/images/images/bgwhite.jpg);
    background-repeat:repeat;
    color:#CC6666;
    float:right;
    width:150px;
    padding:.3em .6em .3em .6em;
    margin:.6em .6em 0 0;
    }

他のヒント

あなたはFirebugのようなプラグインを持っていますか？それはあなたの背景色を上書きしている可能性のあるルールを示すに大いに役立つことができます。

また、あなたがあなたの六角色番号の前に#が含まれます。（例：#ffffff）

...それだけで上書きすることができますので、あなたが、最も具体的でCSSを、選択するために、IDを使用しているように見えます：1）他のIDセレクタはさらにCSSでダウン、または2）を選択idとクラスまたはタグ名の両方を持つCSSでどこでも、その特異性を増加させることができます。

（ここではの CSS特異製シンプル）

それは親の属性を継承したときに

あなたのターゲティングを確認してください...時にはクラスまたはIDへの明示的な指示は十分ではありません。

だから、のように指定します：

#yourid {background-color: #333;}

親がbackgoundが指定されている場合には十分ではないかもしれません。

あなたが好きelement.IDを行う必要があります。

div#yourid {background-color: #333;}

私のドリフトをキャッチ？

EDITます：

ええ、私は子供たちが#longBoxから継承されて見ることができます。私は前に述べたように、あなたがターゲットとするのがベストです。また、不足しているハッシュ/ポンド/チックタックつま先のものが検証するために必要とされるが、ほとんどのブラウザでは、不正な形式のCSSのOKを解釈する必要があります。

ライセンス： CC-BY-SA と帰属

所属していません StackOverflow