CSS를 사용하여 한 이미지를 다른 이미지와 오버레이하고 싶습니다. 이에 대한 예는 첫 번째 이미지 (원하는 경우 배경)가 제품의 썸네일 링크이며 링크가 더 큰 버전의 이미지를 표시하는 라이트 박스 / 팝업을 여는 링크입니다.
이 링크 된 이미지 위에 돋보기 이미지를 사용하여 사람들이 이미지를 클릭하여 이미지를 확대 할 수 있음을 보여주고 싶습니다 (확실히 돋보기가 없으면 명확하지 않습니다).
답변
방금 프로젝트 에서이 일을 끝냈습니다. HTML 쪽은 다음과 같습니다.
<a href="[fullsize]" class="gallerypic" title="">
<img src="[thumbnail pic]" height="90" width="140" alt="[Gallery Photo]" class="pic" />
<span class="zoom-icon">
<img src="/images/misc/zoom.gif" width="32" height="32" alt="Zoom">
</span>
</a>그런 다음 CSS를 사용하십시오.
a.gallerypic{
width:140px;
text-decoration:none;
position:relative;
display:block;
border:1px solid #666;
padding:3px;
margin-right:5px;
float:left;
}
a.gallerypic span.zoom-icon{
visibility:hidden;
position:absolute;
left:40%;
top:35%;
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}
a.gallerypic:hover span.zoom-icon{
visibility:visible;
}CSS에 많은 샘플을 남겼으므로 스타일을 결정한 방법을 알 수 있습니다. 참고 돋보기를 통해 볼 수 있도록 불투명도를 낮췄습니다.
도움이 되었기를 바랍니다.
편집 : 귀하의 예를 명확히하기 위해-원한다면 무시 visibility:hidden;하고 :hover실행을 죽일 수 있습니다. 이것은 내가 한 방식이었습니다.
답변
이 기사 에서 제안한 한 가지 기술 은 다음과 같습니다.
<img style="background:url(thumbnail1.jpg)" src="magnifying_glass.png" />답변
추가 태그로 내용을 수정하지 않고 CSS로만 수행하는 간단한 방법은 다음과 같습니다 (코드 및 예제 포함).
http://soukie.net/2009/08/20/typography-and-css/#example
부모 요소가 정적 위치 지정을 사용하지 않는 한 작동합니다. 상대 위치로 설정하기 만하면됩니다. 또한 IE <8은 : before 선택기 또는 내용을 지원하지 않습니다 .
답변
최근에 내가 한 일이 있습니다. 의미 적으로 완벽하지는 않지만 작업을 완료합니다.
<div class="container" style="position: relative">
<img style="z-index: 32; left: 8px; position: relative;" alt="bottom image" src="images/bottom-image.jpg">
<div style="z-index: 100; left: 72px; position: absolute; top: 39px">
<img alt="top image" src="images/top-image.jpg"></div></div>답변
이 튜토리얼을 확인하고 싶을 수도 있습니다 :
http://www.webdesignerwall.com/tutorials/css-decorative-gallery/
그것에서 작가는 빈 스팬 요소를 사용하여 오버레이 이미지를 추가합니다. 코드를 최대한 깨끗하게 유지하려면 jQuery를 사용하여 해당 범위 요소를 삽입 할 수 있습니다. 전술 한 기사에도 예가 제시되어있다.
도움이 되었기를 바랍니다!
데이브
답변
호버에서 돋보기 유리만을 원한다면 사용할 수 있습니다.
a:hover img { cursor: url(glass.cur); }http://www.javascriptkit.com/dhtmltutors/csscursors.shtml
영구적으로 원한다면 원래 썸네일에 포함 시키거나 HTML에 추가하는 대신 JavaScript를 사용하여 추가해야합니다 (순전히 스타일이며 내용에 포함되어서는 안됩니다).
JavaScript 측면에서 도움이 필요하면 알려주십시오.
답변
CSS3에서 다음을 수행 할 수 있습니다.
.double-image {
background-image: url(images/img1.png), url(images/img2.png);
}