요소 배경 이미지

Question

내가 아래의 이미지처럼 블록 견적을 만들려고 해요 렌더링되지 않습니다 상단 및 왼쪽에 10px 간격의 PNG 이미지.

요소는 배경 이미지를 제외하고 올바르게 렌더링되지만 표시되지 않습니다.

CSS 코드 :

#block_quote{ 
    float:left; 
    width:400px; 
    background:#f7f7f7; 
    background-image:url(images/quote-top.png) left top no-repeat; 
    margin:50px 0 100px 53px; 
    border:1px solid #ccc; 
} 

#block_quote p{ 
    font:italic 14px segoe ui, arial, sans-serif; 
    color:#5f5f5f; 
    line-height:1.4em; 
    margin:0; 
    padding:20px 15px 20px 60px; 
} 

어떤 아이디어가 왜 이미지가 렌더링되지 않는 이유는 무엇입니까?

감사

는

Answer 1

귀하의 이미지 경로가 CSS 파일에 상대적이어야합니다. 또한 한 줄로 모든 선언을 사용하고 끝에있는 순서가 no-repeat top left 인 경우 배경이 아닌 배경 이미지입니다.

배경 : url (images/quote-top.png) no-repeat 왼쪽 위;

Answer 2

background은 이미지의 URL을 비롯한 모든 배경 속성을 설정하는 "속기 속성"입니다. 당신이 그것을 쓰는 방법, 그것은 이미지를 지정하지 않고 단지 색을 지정합니다.

background과 background-image과 같은 개별 배경 속성이 섞이지 않도록하십시오. 그것은 중 하나

background:#f7f7f7 url(images/quote-top.png) no-repeat left top; 

또는

background-color:#f7f7f7; 
background-image:url(images/quote-top.png); 
background-repeat:no-repeat; 
background-position:left top; 

하지만 이들의 혼합해야한다; 브라우저를 혼란스럽게 할 것입니다.