2009-11-09 2 views
0

배경 이미지로 투명 png가있는 요소가 있습니다. 사진 비트가 잘라져 프레임이 표시되는 것처럼 폴라로이드처럼 보입니다.배경 이미지로 투명 PNG

이 배경을 배경으로 투명 PNG 배경을 가진 요소 뒤에 표준 이미지가 있어야 프레임 내부에 들어갈 수 있습니다.

나는 z- 색인 및 불투명도 설정을 시도했지만 불투명도 설정으로 인해 이미지가 투명하게 보이도록 표시 할 수 있지만

아이디어가 있으십니까?

<div class="yourPhoto"> 
    <div class="yourPNGframeImage"> 
    </div> 
<div> 

또는 인라인 이미지와 절대 두 위치 사용할 수 있습니다 : .yourPhoto 배경 이미지 인 경우

+2

문제의 스크린 샷을 어딘가에 넣을 수 있습니까? 단지 설명만으로 시각화하기가 어렵습니다. 감사! –

+0

"'나는 z- 색인 및 불투명도 설정을 시도 했습니까?" CSS를 통해 불투명도를 설정 하시겠습니까? –

+1

실제 문제는 무엇입니까? –

답변

1

, 당신이 할 수

<div class="container"> 
     <img class="yourPhoto" src=""> 
     <img class="yourPNGframeImage src=""> 
</div> 

.container {position: relative;} 
.yourPhoto, .yourPNGframeImage {position: absolute; top: 0px; left: 0px;} 
+0

나는이 대답을 좋아한다. 나는이 페이지에서 매우 유사한 개념을 사용했다 : http://www.screenfeed.com/content/. 미리보기 이미지와 관련된 소스를 봅니다. – jessegavin

+0

이것이 제가 한 일입니다. 투명 배경을 가진 요소가 이미지의 infront에 있으면 더 좋을 것입니다. – mindwire22

+0

@ Meander365 이것은 위의 두 예제가하는 것과 정확히 같습니다. 두 경우 모두 '프레임'이 사진 위에 배치됩니다. –

0

가 보는 공정한 몇 가지가를 PNG를 수행 할 때

  1. 절단 할 때 배경이 꺼져 있는지 확인하십시오.
  2. 내보내기는 png24입니다.
  3. 귀하의 경우 6으로 당신은 PNG 다음 단계를 시도

  • http://www.twinhelix.com/
  • 를 해결 트윈 나선형처럼가 someting를 사용해야합니다. 이미지의 불투명도를 변경하지 않아도 전체 이미지에 영향을 미칠 수 있습니다. z 인덱싱을 사용하는 경우 css 요소를 넣어야합니다.