html - 颜色叠加在 HTML img 上

Question

我一直在为 HTML 图像设置样式 (<img>)。我找不到在图像上添加白色叠加层的方法。我一直在尝试这个 - CSS background image on top of <img> (不起作用)。

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%);
}

有什么方法可以添加叠加层吗？感谢您的帮助!

Answer 1

试试这个 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>