div 배경 이미지가 표시되지만 배경색이 표시되지 않습니다

Question

사소한 CSS 문제가 있습니다.

저는 div 클래스의 스타일을 설정했으며 모든 스타일 (패딩, 글꼴 색 등)을 표시합니다. 그러나 오버레이하는 div에 대해서는 배경색이 작동하지 않습니다.

테스트로 테두리 및 테두리 스타일을 설정하려고 시도했지만 테두리 색을 제외하고 모두 잘 작동했지만 추가 스타일이 적용된 테두리는 검정색으로 남아있었습니다.

각 div에는 고유 한 ID가 있으며 배경색이 작동하지 않는 div는 컨테이너 div에 중첩되어 있습니다 (나란히). 중첩 된 div가 부모 divs 배경색을 사용하는지 이해하려고 시도했지만 부모의 오버플로를 변경하려고 시도했지만 아무런 영향을주지 않았습니다.

주위에 나는 올바른 배경색의 1 x 1px jpg를 만들고 divs 배경 이미지를 설정했습니다. 하지만 해킹인데 배경 색상을 제외하고 모든 스타일 요소가 작동하는 이유를 아는 것이 낫지 않습니다.

누구든지 내 상황을 충분히 설명해 주시면 감사하겠습니다.

(또한, 추가로, 나는 코드를 작성 Dreamweaver를 사용하여 배경 색상은 미리보기 모드에 표시하지만, 파이어 폭스, 크롬, 또는 IE에서 표시되지 않습니다)

요청 코드 :

를

#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; 
} 

Answer 1

이미지가 작동하는 이유는 자식에게 정의 된 새로운 속성이기 때문입니다. 부모는 BG를위한 IMG가 없었기 때문에 1x1 컬러 pxel 해킹을 사용하면 상속 구조에서 벗어날 수 있습니다. 어쨌든 :

는 다음을 시도해보십시오

 #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; 
    } 

Answer 2

 <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--> 

은 방화범 같은 플러그인을 가지고 있습니까? 그러면 배경색을 덮어 쓸 수있는 규칙을 보여줄 수 있습니다.

또한 16 진수 번호 앞에 #을 포함해야합니다. (예 : #ffffff)

... id를 사용하여 가장 구체적인 CSS를 선택하는 것처럼 보이기 때문에 다음과 같이 우선 적용 할 수 있습니다. 1) CSS에서 다른 ID 선택기 , 또는 2) CSS의 어느 곳에서나 id와 클래스 또는 태그 이름이있는 선택자 (selector). (CSS specificity made simple here)

Answer 3

목표를 확인하십시오. 때때로 클래스 또는 ID에 대한 명시 적 명령이 상위 속성을 상속 할 때 충분하지 않습니다.

그래서 지정, 같은 : 부모가 지정된 backgound에있는 경우

#yourid {background-color: #333;} 

충분하지 않을 수 있습니다.

당신은

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

잡아 내 드리프트처럼 element.ID을 수행해야 할 수 있습니다?

편집 :

그래, 나는 아이들이 #longBox에서 상속되는 볼 수 있습니다. 이전에 언급 한대로 타겟팅하는 것이 가장 좋습니다. 또한 누락 된 해시/파운드/틱택 톡 발가락이 유효해야하지만 대부분의 브라우저는 변형 된 CSS를 확인해야합니다.