CSS에서 배경 이미지로 렌더링 할 img 요소를 얻는 방법

Question

기본적으로 이미지 위에 반투명 div를 넣어 슬라이드 쇼의 텍스트 배경으로 사용하려고합니다. 죄송 합니다만 브라우저는 항상 을 background-image 이상으로 렌더링하려고합니다. 이 문제를 해결할 방법이 있습니까? 나는 지금까지 z-index을 시도 PNG (24)

#slideshow .info 
{ 
    height: 80px; 
    margin-top: -80px; 
    background: url(../../images/slideshow-info-pixel.png) repeat; 
} 

... slideshow-info-pixel.png은 하나의 픽셀, 50 %의 불투명도 인과 : 여기

는 반투명 사업부 내 현재 CSS입니다 CSS는 IE6과 호환되어야합니다.

Answer 1

내가 맞다면, 당신이하고있는 일은 html에 이미지를 삽입 한 다음 투명 div를 CSS로 렌더링 한 것입니다.

여기 나의 제안은 다음과 같습니다

• 다른 통해 하나 개의 사업부를 렌더링 (실제로 필수적)
• 사용 Z- 인덱스 위치 속성을 사용 또한 CSS
• 에 의해 렌더링 배경 이미지를 가지고

CSS :

.yourImage 
{ 
    position: relative; 
    background: url(./yourImage.png); 
    width: 800px; 
    height: 600px; 
    z-index: 20; 
} 

. transparent 
{ 
    position: relative; 
    background: url(./transparent.png) repeat; 
    width: 800px; 
    height: 600px; 
    z-index: 30; 
} 

.yourText 
{ 
    position: relative; 
    z-index: 40; 
} 

CSS가 IE6과 호환되는지 정말로 확인하려면 다른 템플릿을 사용해야합니다. 진지하게, 모든 IE6 단점을 준수하는지 확인하는 것은 엄청난 시간 낭비입니다. 더 빠른 방법은 단순히 IE6 사용자 만 볼 수있는 더 단순한 버전의 페이지를 작성하는 것입니다.

Answer 2

은 배경 이미지가있는 요소 뒤에있는 다른 요소에 이미지를 넣어야합니다. 배경 이미지는 항상 가장 뒤쪽으로 렌더링됩니다.