테스트 사이트 - 개발 중인 베타 버전입니다

퍼블리싱 질문-이미지에 투명막 씌우기 채택완료

ㅁㅇㅁㅇㅁㅇ 7년 전 조회 2,566

<div>

     <div id="opacity"><img src="gg.png" alt=""></div>

     <div><p>종료</p><p>감사합니다</p>

      </div>

</div>

 

#opacity에 background와 opacity값을 입력해서 

이미지에 막을 씌우고 싶은데요

이미지가 맨 위로 가더라구요..

z-index로 값을 줘도 안되던데 어떻게 해야 할까요?

댓글을 작성하려면 로그인이 필요합니다.

답변 3개

채택된 답변
+20 포인트
7년 전

img {
    -webkit-filter: grayscale(100%); 
    filter: grayscale(100%);
}

로그인 후 평가할 수 있습니다

답변에 대한 댓글 2개

ㅁㅇㅁㅇㅁㅇ
7년 전
답변 감사합니다만...
투명막이 씌어진다기 보다는 흑백의 개념이 되어버리네요...ㅠㅠ
ㅁㅇㅁㅇㅁㅇ
7년 전
아무래도 이 방법이 좋을것 같네요 감사합니다^^

댓글을 작성하려면 로그인이 필요합니다.

kjwkjm
7년 전

<div style=" position:relative;">

   <div class="water_mark" style=" position: absolute; top:0; width:"해당 가로 입력"; height:"해당 높이 입력"">
   &nbsp;
   </div>

     <div id="opacity"><img src="gg.png" alt=""></div>

     <div><p>종료</p><p>감사합니다</p>

      </div>

</div>

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

ㅁㅇㅁㅇㅁㅇ
7년 전
답변 감사합니다만
유레카56님을 채택해야겠네요
죄송해요

댓글을 작성하려면 로그인이 필요합니다.

kjwkjm
7년 전

아니여 그 이미지 위쪽에 div 하나 더 잡으셔서

 

투명막을 입히시는 건 어떠신가요?

 

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

ㅁㅇㅁㅇㅁㅇ
7년 전
위에 코드 보시면 img 태그가 <div id="opacity">로 감싸져 있는 상태에요
#opacity{background:red}해서 확인해보니까 이미지가 div 위에 위치하게 되네요
z-index도 안 먹히구...

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인