CSS는 이미지 나 CSS를 DIV

에로드되지 않습니다CSS는 이미지 나 CSS를 DIV

.backgroundImg { 
    background: url('./path/file.gif'); 
    background-repeat: no repeat; 
    width: 24px; 
    height: 24px; 
} 

.ui-highlight { 
    border: 2px solid green; 
    color: #363636; 
    padding: 0.7em; 
}

나는이 수업을

<div class="ui-highlight ui-corner-all"> 
    <div class="backgroundImg" style="float:left;"> 
     some text......... 
    </div> 
</div>

편집

I를 가져 DIV 태그가 왼쪽에 이미지가 있고 이미지 오른쪽에 텍스트가있는 테두리가있는 상자를 만들려고합니다. 요소를 검사하고 UI가 강조 표시 될 때 이미지가 나타납니다. CSS를 알고 솔직히 저는 전문가가 아닙니다. 이미지가 이미지를 볼 수있는 backgroundImg 클래스에 폭과 높이를 추가 한 후

UPDATE

를 표시하지 않는 이유 누군가가 나를 도울 수 있습니다. 절대 경로를 사용하여

출처

2012-08-07 user525146

우선 상황을 점검하기 위해 웹킷 브라우저 파이어 폭스에 대한 방화범 또는 개발자 도구를 사용합니다.

"... 일부 텍스트"를 마우스 오른쪽 버튼으로 클릭하고 이 요소 검사를 선택합니다.
HTML 관리자에서 "backgroundImg"클래스로 div를 클릭하십시오.
오른쪽에서이 요소에 대한 CSS 속성이 표시되어야합니다. ('./path/file.gif') 위에 마우스를 올려 놓고 이미지 미리보기 이미지가로드되는지 확인합니다. 그렇지 않으면 경로 설정이 잘못되었을 수 있습니다.
HTML 속성에서 div 위로 마우스를 가져 가서 페이지에서 어떻게 강조 표시되는지 확인합니다. div가 이미지를 표시하기에 충분한 공간을 차지하지 않을 수 있습니다. 이 경우 너비/높이을 설정하거나 div에 내용을 추가하여 채워야합니다.
부모 div (ui-highlight ui-corner-all)의 jQuery UI 클래스가 자식 div의 이미지를 가릴 수있는 스타일을 설정했을 수 있습니다. HTML/CSS 검사기로 검사하십시오.

출처

2012-08-07 21:42:38

내가 요소를 검사하고 나는 CSS 클래스 UI를 강조 표시 위에 마우스를 올려 때 이미지 최대로드 : 내가있어 코드입니다. 이미지 크기는 24x24 픽셀입니다. – user525146

** ** backgroundImg ** 클래스로 마우스를 가져 가면 ** 이미지가로드되어야합니다. 이미지는 ** ui-highlight **에서로드 될 수 있지만 jQuery UI와 함께 제공되는 이미지 일 가능성이 높습니다. –

죄송합니다. backgroundImg 클래스를 말하고 싶습니다. 무슨 이유로 든 div 클래스가 어떤 이유로 firebug에서 볼 때 투명합니다. – user525146

시도 :

background: url('/path/from/root/file.gif')

또는 :

background: url('http://example.com/path/from/root/file.gif')

이 더 모호한 이미지가 어디에서 오는에 관해서는 없다는 것을 보장합니다.

출처

2012-08-07 21:40:32

우선 내가 어떤 종류의 clearfix를 적용 할 것을 권합니다. 쉬운 방법은 .ui-highlight에 overflow:hidden;을 추가하는 것입니다. 이것은 래퍼에게 약간의 높이를주기 위해 필요합니다. 방법 및 이유에 대한 clearfix 검색 일부를 DDo.

두 번째로 이미지가 실제로로드되는지 확인하면 경로가 잘못되었을 수 있습니다. 크롬에서 코드 관리자로 확인하면 나에게 도움이 될 것입니다. 내가 할 것

출처

2012-08-07 21:40:48 Pevara

CSS와는 구문적인 차이가 없으므로 이미지가 CSS에서 지정하는 위치가 아니라고 생각됩니다.절대 URL 또는 CSS 파일 자체에 상대적인 경로를 시도하십시오.

그러나 나는이 CSS로 찾고있는 결과를 얻지 못할지 모르겠다. 당신이

background: #f00;

에

background: url('./path/file.gif');

을 변경하려고하면 당신은 당신이 이미지 URL 밖으로 일을 얻을 때받을거야 무엇을 미리 볼 수 있습니다.

당신이 "이미지의 오른쪽에 왼쪽과 텍스트에 이미지와 경계 상자"를 얻기 위해 노력하고 있다고 때문에이 같은 시도 할 수 있습니다 :

CSS :

.ui-highlight { 
    background: url('http://www.site.com/file.gif') top left no-repeat; 
    border: 2px solid green; 
    color: #363636; 
    padding: 0.7em; 
    padding-left: 90px; /* This should be the width of the background image */ 
}

을

HTML :의 div 주위에 테두리를 그릴 사업부의 왼쪽 상단에 배경 이미지를 추가

<div class="ui-highlight"> 
    some text......... 
</div>

는, 그 심상의 오른쪽에있는 텍스트를 작성 ge.

출처

2012-08-07 21:46:29 Jason

코드에서 수행하려는 작업은 텍스트에 이미지의 배경을 제공하는 것입니다. 그것은 효과가 있지만 의도 한대로는 아닙니다. backgroundImg div를 HTML의 태그로 바꾸고 "align = 'top'"요소를 사용하십시오.

<html> 
<head> 
<style type="text/css"> 

.ui-highlight { 
    border: 2px solid green; 
    color: #363636; 
    padding: 0.7em; 
} 
</style> 
</head> 
<body> 
<div class="ui-highlight"> 
    <img src="path/img.gif" style="padding:0px;" align="top"> 
     some text......... 
    </br> 
</div> 
</body> 
</html>

출처

2012-08-07 22:03:06 InvisibleUp

CSS는 이미지 나 CSS를 DIV

답변

관련 문제