HTML 이미지 () 스타일링에 갇혀 있습니다. 이미지 위에 흰색 오버레이를 추가하는 방법을 찾을 수 없습니다. 나는 이것을 시도했다- <img> 위에 CSS 배경 이미지 (작동하지 않음).
HTML
<img class="default-user" src="https://minotar.net/helm/Steve/16.png">
CSS
.default-user {
position: absolute;
outline: #e8e8e8 solid 1px;
-webkit-filter: grayscale(50%);
filter: grayscale(50%);
}
오버레이를 추가하는 방법이 있습니까? 도와 주셔서 감사합니다!
이 jsFiddle 시도
.default-user {
position: absolute;
outline: #e8e8e8 solid 1px;
-webkit-filter: grayscale(50%);
filter: grayscale(50%);
width:150px;height:150px;
}
#overlay {
padding:10px;
position:absolute;
background-color:white;
opacity:0.5; /* -> transparency 50% */
height:130px; /* -> image_height - padding */
width:130px; /* -> image_width - padding */
z-index:1; /* -> put overlay over image */
}<div class=container>
<div id=overlay>Overlay text</div>
<img class="default-user" src="https://minotar.net/helm/Steve/16.png">
</div>이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다