오버랩 배경 이미지

CSS 배경 이미지를 사용하여 배경 이미지가있는 테이블이 있습니다. 테이블에는 <img을 사용하는 이미지가 있습니다. 이미지 <img 테이블이 배경 이미지 위에 있습니다. 배경 이미지가 텍스트와 마찬가지로 이미지 <img을 덮어 씁니다. 그게 가능하니?오버랩 배경 이미지

코드 예 :

<style> 
#content { background-image:url("background-image.jpg"); background-repeat:repeat-y} 
</style> 

<table id="content"> 
<tr> 
    <td>Some text.....text.....text 
    Image: <img src="quadrado.jpg" /> 
    </td> 
</tr> 
</table>

출처

2010-06-18 Douglas V. Pasqua

"I would like to display the two images. The background image 
above the quadrado.jpg ! Like a watermark"

는 소리. CSS로는 그렇게 할 수 없습니다.
하지만 당신과 같이 스타일을 추가 가까이 올 수 :

#content 
{ 
    opacity:   0.8; 
    -ms-filter:   "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; 
    filter:    alpha(opacity=80); 
} 
#content img 
{ 
    opacity:   0.8; 
    -ms-filter:   "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; 
    filter:    alpha(opacity=80); 
}

.
진정한 오버레이에 대한 자세한 내용은 HTML에 코드를 작성하거나 javascript를 사용하여 즉시 추가해야합니다.

this page을 살펴보십시오. 그것은 OverlayTheBackground 클래스와 블록에 대한 오버레이를 생성하는 자바 스크립트를 사용합니다.

jQuery plugins that are supposed to generate overlays도 있습니다.

~~아마도 원하는 사진을 게시하십시오.~~

~~#content img {visibility: hidden;}~~

출처

2010-06-18 23:44:24

내가 두 이미지를 표시 할 것입니다 :

, 그것은 당신이해야 할 같은 소리는이 스타일을 추가합니다. quadrado.jpg 위의 배경 이미지! 워터 마크처럼. 감사합니다 –

좋아, 나는 내 대답을 업데이 트했습니다. –

데모 페이지는 경쟁 조건이 있으므로 항상 인트라넷 대신 웹을 끌 때 위치를 올바르게 측정하지는 못했습니다. 이제 해결해야합니다. –

나는 내가 완전히 질문을 이해하지만 컨텐츠 이미지의 일부를 표시 할 배경 이미지를 원하는 경우, 당신은 PNG의 또는 GIF의 등을 사용할 필요가 확실하지 않다 그들은 이미지의 일부가 투명하고 jpg가하지 못하게합니다. 당신이 오버레이에게 원하는처럼

출처

2010-06-18 23:06:04 jeroen

오버랩 배경 이미지

답변

관련 문제