다른 .JPG 이미지

Question

을 통해 하나 개의 .PNG 이미지를보기 나는 다음과 같은 코드를 가지고 : 그것은 지금처럼

<img style="background: url(./image/data/logo.png) no-repeat top right" src="./image/data/picture.jpg" /> 

, 그것은이 picture.jpg 대신 이미지에서 logo.png을 보여줍니다. 어떻게하면 .jpg 이미지 위에 표시되도록 할 수 있습니까?

감사합니다.

Answer 1

2 개의 이미지를 사용해야합니다. img는 위치 절대 값 (절대 값)으로 있어야합니다.
절대 png를 포함하려면 container에 position : relative가 있어야한다는 것을 잊지 마십시오.

http://jsfiddle.net/jNpaH/

HTML 태그 :

< DIV 클래스 = "이미지">
<의 img SRC = "HTTP : //upload.wikimedia
다음은 예입니다. org/wikipedia/commons/7/7a/Basketball.png " class ="png-over "/> < img src ="http://upload.wikimedia.org/wikipedia/commons/4/42/Papua_New_Guinea_map. png " /> </DIV>

작풍 :

.image{position:relative} 
.png-over{position:absolute; top:0; left:0} 

---

그 기술의 문제가 코드를 이미지 태그로 스팸된다 있다는 것입니다.
jQuery를 사용하여 문제를 해결하는 한 가지 방법은 각 div 컨테이너를 'images'클래스로 찾고 각 이미지 컨테이너 앞에 이미지 태그를 추가하는 것입니다. 난 당신이 짧은 HTML 코드를 선호한다고 가정 코드에 따르면
http://jsfiddle.net/jNpaH/2/

Answer 2

:
다음은 예입니다. 그러나 그것을 덮고있는 배경을 가진 image_tag를 갖는 것은 불가능합니다.
http://jsfiddle.net/QyMkh/

먼저 모든 이미지를 포함하는 사업부를 넣어 :이 최종 코드
: 가장 깨끗한 방법은 사용하는 jQuery를합니다. div에는 클래스가 있어야하며 이미지에는 반드시 필요하지 않습니다.

<div class="image"> 
    <img src="http://upload.wikimedia.org/wikipedia/commons/4/42/Papua_New_Guinea_map.png" /> 
    <img src="http://upload.wikimedia.org/wikipedia/commons/4/42/Papua_New_Guinea_map.png" /> 
    <img src="http://upload.wikimedia.org/wikipedia/commons/4/42/Papua_New_Guinea_map.png" /> 
</div> 

그런 다음 닫는 </BODY> 전에 HTML이 jQuery를 블록을 추가 :

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
<script type="text/javascript"> 
    // store in a variable the url of the image that will be used as background 
    var url = 'http://upload.wikimedia.org/wikipedia/commons/7/7a/Basketball.png'; 

    // select every image_tag that is children of the div with the class 'image' 
    jQuery('.image img').each(function() { 
     // every child image will be wrapped inside generated divs with a class 'img-wrap' 
     $(this).wrap('<div class="img-wrap"></div>'); 
    }); 

    // After the images are wrapped, insert the image tag that will work as background, note that instead of using the source I'm using the variable that stores it. 
    $('<img src="' + url + '" class="logo" />').prependTo('.img-wrap'); 
</script> 

마지막으로 원하는 효과를 얻기 위해 그 스타일 선언을 추가합니다.

<style type="text/css"> 
.img-wrap{position:relative} 
.img-wrap img.logo{position:absolute; top:0; left:0} 
</style> 

이 코드는 다음 번에 편집하려고 할 때 불필요한 마크 업없이 HTML 문서를 유지합니다. image_tag를 배경으로 사용하면 css로 너비와 높이의 크기를 조정할 수 있다는 이점이 있습니다.당신은 더 많은 유연성을 원하는 경우

.img-wrap img.logo { height: 170px; left: 75px; position: absolute; top: 50px; width: 170px} 

는이를 종료하려면 예를 들어, 당신은 image_tags는 사업부 컨테이너 수 싶지 않아,이 작업을 수행 : 스타일이 새로운 규칙을 추가보십시오 jQuery를이 라인을 대체 블록이

jQuery('.image').each(function() { 

와

jQuery('.image img').each(function() { 

및 각

,399,961에 클래스 = "이미지"를 추가