테두리 이미지가 Safari 및 Opera에 적용될 때 배경 이미지가 표시되지 않습니다.

내 사이트 바닥 글에 다음 CSS 클래스를 적용하여 배경 이미지와 상단에 3px 3 톤 테두리를 표시합니다.테두리 이미지가 Safari 및 Opera에 적용될 때 배경 이미지가 표시되지 않습니다.

.site-footer { 
    background-image: url(../img/footer-background.png); 
    background-repeat: repeat; 
    border-width: 3px 0px 0px; 
    padding: 15px 0; 
} 

.border-image { 
    -webkit-border-image: url(../img/footer-border-hr.png) 2 0 0 0 repeat; 
     -moz-border-image: url(../img/footer-border-hr.png) 2 0 0 0 repeat; 
     -o-border-image: url(../img/footer-border-hr.png) 2 0 0 0 repeat; 
      border-image: url(../img/footer-border-hr.png) 2 0 0 0 repeat; 
      border-width: 2px 0px 0px 0px; 
}

은 크롬 (18) 괜찮지 만, 배경은 파이어 폭스 (맥 10.0.2 11) 사파리 (Mac 버전 5.1.5 (7534.55.3))와 오페라 (단지 일반 흰색입니다 Mac 11.62). inspect 요소를 통해 border-image를 제거하면 배경이 복원됩니다. 경계 이미지가 기본적으로 배경 이미지로 렌더링되므로 배경이 재정의되고 있지만 추측 할 수 있습니까?

출처

2012-04-12 David Beesley

문제점을 보여주는 실제 페이지로 링크 할 수 있습니까? –

나는 사랑하고 싶지만 내 상사는 그 점에 행복하지 않을 것이라고 생각한다. 죄송합니다. 도움이되지 않습니다. 나는 오늘 후에 어떤 종류의 테스트 케이스를 업로드하려고 시도 할 것이다. –

경계 이미지의 중앙 부분이 흰색이고 배경 이미지 상단에 그려져 있고 대부분의 브라우저가 the fill keyword을 추가하기 전에 실험용 버전 border-image을 구현했기 때문에 흰색 배경이 나타납니다.

사양 설명 같이

'작성'키워드가 존재하는 경우, 보존되어야하는 경계 영상의 중간 부분을 야기한다. (이 삭제됩니다 기본적으로, 즉, 빈으로 처리 하였다.)이 필 키워드를 지원하지 않는

브라우저 (I 적어도 오페라와 파이어 폭스하지 않는 알을 Firefox will support it as of version 12하지만)의 중간을 폐기하지 않습니다 테두리 이미지를 만들지 만 배경 위에 그립니다.

PNG를 사용 중이므로 경계선 이미지의 중간 부분이 투명하게 표시되는지 확인할 수 있습니다. 그걸 통해 배경이 나타나야합니다.

출처

2012-04-16 15:51:25 mercator

감사합니다. 지금은 분명해 보인다. –

테두리 이미지가 Safari 및 Opera에 적용될 때 배경 이미지가 표시되지 않습니다.

답변

관련 문제