-1

배경 이미지를 가져 가면 다른 배경이 표시되지만 배경은 그대로 유지됩니다. 기본적으로, 나는 공중에 떠오른 이미지 위에 화살표가 나타나길 원하지만, 이것이 내가 얻는 것입니다. (아래 비트 링크를보십시오). http://i44.tinypic.com/2vnm7au.jpg 이미지를 가져 가면서 배경을 유지하십시오.

http://bit.ly/18F2Cqd

어떤 제안 : 이것은 같아야 무엇인가?

출처

2013-08-19 user2695684

CSS3에서, 여러 BG 이미지를 추가 할 수 있습니다. – Era

빠른 해결책은 이미지를 두 배 크기로 만듭니다. 위쪽 절반은 원본 이미지, 아래쪽 절반은 최종 결과를 배치합니다. div를 생성 된 이미지의 높이의 반과 같게 만들고 배경 위치를 가리 키도록 변경합니다. –

@RohanSood하지만이 호버 효과는 특정 갤러리에 업로드 된 모든 이미지에 영향을 주길 원합니다. – user2695684

당신은 당신의 CSS에 오류가 있습니다.
먼저, 배경 이미지는 갖고있는 것보다 다른 URL에 있습니다. 그리고 background-image을 작성 했으므로 속기 속성 인 background을 작성해야합니다.

이러한 오류를 수정 한 후 배경 이미지가 원래 이미지보다 2 픽셀 더 낮게 표시되므로 화살표를 같은 위치에 나타나게하려면 배경 위치를 약간 변경해야했습니다.

background: url("http://oi44.tinypic.com/2vnm7au.jpg") 0 -2px no-repeat;

수정 바이올린 : http://jsfiddle.net/MrLister/vR7st/3/

출처

2013-08-19 10:35:52

정말 고마워요. 나는 그 실수를 저지른 많은 방법을 시도했다. 도움을 주셔서 감사합니다. – user2695684

배경 이미지 위에 오버레이하는 것으로 알고 있습니다. 오버레이 된 이미지는 항상 동일 할 것입니다.

이 경우, CSS는 다음과 같습니다 기본 배경이 볼 수 있도록

.test { 
    position: absolute; 
    top: 8px; 
    left: 20px; 
    background: url("base.jpg"); 
    width: 250px; 
    height: 200px; 
} 

.test:hover:after { 
    content: ''; 
    position: absolute; 
    left: 0px; 
    right: 0px; 
    top: 0px; 
    bottom: 0px; 
    background: url("overlay.png"); 
    background-repeat: no-repeat; 
}

오버레이 파일이 일부 투명 영역이 있어야합니다.

fiddle

출처

2013-08-19 10:18:37 vals

이미지를 가져 가면서 배경을 유지하십시오.

답변

fiddle

관련 문제