테이블을 사용하지 않고 xml 스타일을 잃지 않고 이미지 크기를 조정하고 오버레이 이미지 추가

Question

썸네일 및 재생 버튼으로 "가짜 비디오 삽입"시스템을 구축 중입니다. 이미지는 표준 크기의 서비스에서 제공되므로 HTML로 크기를 조정할 수밖에 없습니다. 또 다른 제한 사항은 코드 블럭이 자체 포함 (코드 포함)되어야하며 외부 스타일 시트에 의존하지 않아야한다는 것입니다. 투명 버튼으로 재생 버튼을 겹쳐서 표시합니다. 나의 첫 번째 솔루션과 같이 인라인 CSS로 오버레이 이미지에 부정적인 여백을 설정했다 :

<div style="width:340px;height:280px;"> 
<img src="thumbnail.jpg" width="340" height="280"/> 
<div style="margin-top:-280px;"><a href="link-to.video.html"> 
<img src="transparent-embed-overlay.png" 
border="0"></a></div></div> 

을하지만 블로그에 대한 XML 피드, 투명 재생 버튼은 "떨어져"것 "내장"그것 때문에 인라인 스타일을 인식하지 못합니다. 이로 인해 나를 배경 이미지로 이미지가있는 단일 셀 테이블을 작성해야했습니다. 그런데 표준 이미지 미리보기 이미지의 크기를 조정할 수 없었습니다. 기본 이미지 미리보기 이미지 크기를 기본 크기로 조정했습니다.

FWIW, 여기 내가 사용에 의존하고있어 코드는 다음과 같습니다

<table width="320" height="240" background="thumbnail.jpg"> 
<tr><td><a href="link-to-video.html"> 
<img src="transparent-overlay.jpg" border="0"></a></td></tr></table> 

Answer 1

당신은 예에 대한 링크를 보낼 수 있을까요?

배경 태그를 동적으로 변경하는 것으로 알고 있지만 CSS 3을 사용하지 않고 배경 이미지의 크기를 조정할 수 없으므로 호환성이 손상됩니다.

CSS 배경 속성은 색상, URL, 위치 x, y 및 반복을 포함 할 수 있습니다.

즉.

background: white url("mypic.jpg") 0 0 no-repeat; 

Quirksmode CSS 3 Backgrounds

당신이 동적으로 새로운 이미지 소스를 변경하고 무엇에 높이와 너비를 설정 테이블 내부에 img 태그를 사용할 수 없습니다 와서 어떻게?

또는 이미지를 드래그하여 문제가 발생하는 경우 단순히 이미지가 아닌 div를 사용하여 높이와 너비를 설정하고 이미지 위에 놓을 수 있습니다.