css - 속성 - div background image




배경 이미지가 Firefox에 표시되지 않습니다. (16)

다음과 같은 HTML '기본'태그가 있습니다.

<head>
   <base href="http://example.com/some/bizarre/directory"/>
</head>

이것이 귀하의 페이지에 있다면, URL에 대한 이미지는 현재 URL과 관련이 없으며 주어진 기본 URL에 대한 이미지입니다. IE가 왜 그것을 표시하고 파이어 폭스가 보이지 않는지는 모르겠다.

Webdeveloper Firefox 확장 프로그램은 "깨진 이미지 표시"옵션을 제공합니다.이 방법이 도움이 될 수 있습니다. 또한 " Live Http Headers "를 사용하여 요청한 이미지와 반환 코드가 무엇인지 확인할 수 있습니다.

DIV의 배경으로 설정된 이미지는 IE에서는 표시되지만 Firefox에서는 표시되지 않습니다.

CSS 예제 :

div.something {
background:transparent url(../images/table_column.jpg) repeat scroll 0 0;
}

(이 문제는 여러 곳에서 설명되어 있지만 결정적인 설명이나 수정 사항은 없습니다.)


답변보다 더 많은 질문들 저는 두려워하지만 올바른 대답을 얻을 수 있도록 도와 줄 수 있습니다.

파이어 폭스에서 div를 무너 뜨리는 것이 가능합니까 (일부 수레 또는 유사)?

div에 다른 내용이있어 이미지를 표시 할만큼 충분히 큰지 확인하십시오.

Firebug 를 설치하고 페이지의 CSS 정의를 살펴 보았습니까?


따옴표 안에 이미지 이름을 넣으십시오. 예 :

background-image: url('image.jpg');

이미지가 JPG 파일이고 PNG / 기타 파일이 아니라고 절대적으로 확신합니까?

나는 IE가 당신이 다른 브라우저가 아닌 다른 것으로 떠나는 것을 허용하는지 궁금해하고있다.

마찬가지로 파일의 대소 문자가 정확하게 지정되어 있습니까?


참조하고있는 이미지가 HTML 파일이 아닌 css 파일과 관련이 있는지 확인하십시오.


미안하지만 엄청나게 커졌지 만 일관되게 나에게 일어날 수있는 두 가지 가능성을 다룹니다.

가능성 1

CSS 파일의 경로가 올바르지 않을 수 있습니다. 예 :

다음 파일 구조가 있다고 가정 해보십시오.

public/
    css/
        global.css
    images/
        background.jpg
    something/
        index.html
    index.html

public/index.html 에서 다음 경로는 CSS 파일을 포함합니다.

#1:  <link href="./css/global.css"
#2:  <link href="/css/global.css"
#3:  <link href="css/global.css"

그러나 public/something/index.html 에서 1과 3 번 번호는 실패합니다. 이 디렉토리 구조 (또는 http://localhost/controller/action/params 와 같은 MVC 구조체)를 사용하는 경우 두 번째 href 유형을 사용하십시오.

Firebug의 Net 모니터 탭은 CSS 파일을 포함 할 수 없는지 알려줍니다.

경로의 주제에서 이미지는 CSS 파일의 경로와 관련이 있음을 기억하십시오. 그래서:

url('./images/background.jpg') /* won't work */
url('../images/background.jpg') /* works: ../ == up one level */

Firebug의 CSS 탭에서 배경 속성의 url() 부분으로 마우스를 가져 가면 파일이로드되고 있는지 확인할 수 있습니다.

가능성 2

div 에 내용이 없으므로 div 가 0 일 수 있습니다. div에 적어도 다음과 같은 라인이 있어야합니다 (예 : lorem ipsum delors secorum).

div.something {
    display: block; /* for verification */
    min-height: 50px;
    min-width: 50px;
}

div 태그의 높이 / 너비를 확인하려면 HTML 탭의 Firebug 레이아웃 탭을 확인하십시오.


저는 FF의 CSS 배경 이미지 속성과 관련하여 비슷한 문제가있었습니다. 그것은 IE에서 잘 작동하지만 FF로 작업을 거부했습니다.) 몇 가지 게시물을 읽은 후 실제로 문제는 테이블을 제외한 div에 내용이 없음을 확인했습니다 (배경 이미지를 크기에 맞게 조정하려고했습니다. broswer를 붕괴 시키거나 확장하지 않고 div의 백그라운드에서 훨씬 더 큰 이미지를 사용하여 일종의 '자르기'를 만들었습니다.) 나를위한 해결책은 img 태그를 배치하여 간단히 '속이기'였습니다. 빈 .png 파일을 표시 한 다음 너비를 100 %로 설정 한 올바른 높이의 이미지로 다시 조정했습니다. 이것은 내 문제를 해결하기 위해 노력했으며, 비슷한 문제를 겪고있는 다른 사람들을 돕기를 바랍니다. 아마도 가장 좋은 수정은 아니지만 수정 사항입니다.)


이상하게도, 몇 시간 동안 키보드에서 머리를 부수고 난 후에 나는 display : table을 추가했다. DIV의 스타일과 배경 이미지가 마술처럼 FF에 나타납니다.


나와 함께. jpg는 IE에서는 표시되지만 Firefox 또는 Chrome에서는 표시되지 않습니다. 여기에 해결책이있다.

이미지가 표시되는 요소에 대해 다음 CSS를 변경하십시오. span, div 또는 다른 요소 일 수 있습니다.

표시 : 블록


FF에서는 문제가 발생하지만 Chrome에서는 발생하지 않는 문제 :

위치에 대해 서로 다른 값 유형을 실수로 혼합 할 수 있습니다.

예를 들어,

background: transparent url("/my/image.png") right 60%  no-repeat;

이 오류가 발생합니다. 수정 내용은 다음과 같습니다.

background: transparent url("/my/image.png") 100% 60%  no-repeat;

내 실수는 '/'대신 '\'를 사용하는 것이 었습니다. IE에서는 작동했지만 다른 브라우저에서는 작동하지 않습니다.



이것은 나를 위해 일했다 :

1) 배경 이미지 테이블을 클릭하십시오.
2) 페이지 하단의 상태 표시 줄을 마우스 오른쪽 단추로 클릭하십시오.
3) 인라인 스타일을 클릭하십시오.
4) 배경 스타일 탭을 클릭하십시오.
5) 색상 제목에 '투명'이 표시되면 문제가됩니다.
6) 색상 상자를 클릭하고 색상을 선택하십시오 (흰색을 선택하는 것이 좋습니다).
7) 이제 색상 제목이 흰색으로 표시됩니다.
8) 확인을 누르십시오.
9) 페이지를 저장하십시오.
10) 페이지를 업로드하고 기존 파일을 덮어 씁니다.
11) 페이지를 새로 고치면 배경 그림이 표시됩니다.

참고 : 배경 그림 jpeg를 업로드했는지 확인하십시오. 배경 오류를 한 번 업로드하는 것을 잊어 버렸습니다. 오류가 발생하기 전에이를 분류하려고했습니다.

문안 인사

남자 이름


필자는 파일 이름이 대소 문자를 구별하는 문제였습니다. CSS인지 아니면 우분투 운영 체제인지 또는 파이어 폭스인지 여부는 확실하지 않지만 배경 이미지를 표시하는 방법은 bluegrad.jpg 대신 BlueGrad.jpg를 참조하는 방법이었습니다. 두 사람 중 이전 사람은 그것이 구원받은 방법입니다. 나는 그것이 대소 문자를 구별 할 것이라고 생각하지 않았다.


이전 게시물하지만 난 그냥 파이어 폭스에 나타나지 않는 유사한 문제 이미지가 광고 블록 추가 기능을 밝혀 내 이미지의 이름을 변경했다


그것은 매우 이상하게 보일지도 모르지만,이 작품은 나를 위해>

#hwrap {
background-color: #d5b75a;
background: url("..//design/bg_header_daddy.png"), url("..//design/nasty_fabric.png");
background-position: 50% 50%, top left;
background-origin: border-box, border-box;
background-repeat: no-repeat, repeat;
}

예, 이중 점 및 이중 슬래시 ... ?? !! ... 나는 이상한 행동을보고하는 인터넷에서 아무것도 찾을 수 없습니다.

[편집] 나는 별도의 게시물을 만들었습니다.> https://.com/q/18342019/529802





background