白色覆盖图像

Question

您好我知道您可以在图像上添加灰度滤镜，但是可以使用滤镜设置进行白色叠加。我必须通过css完成它，而不需要另一个div，绝对定位在图像上，白色背景和不透明度设置已更改。只是标签中的简单图像：

<a href="#">
     <img src="http://placehold.it/300x200" />
</a>

css是基本的

a img{
     display:block;
     max-width:100%;
     height:auto
}

Answer 1

解决方案1：

您可以使用:after伪元素。例如，在white-out元素中添加<a>类，然后使用以下CSS：

a.white-out {
    position: relative;
    display: inline-block;
}
    a.white-out:after {
        position: absolute;
        content: '';
        display: block;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(255,255,255,.5);
    }

jsFiddle Demo

解决方案2：

或者，您可以尝试在<a>元素上设置白色背景，并降低内部<img />的不透明度。例如：

a.white-out {
    display: inline-block;
    background: #fff;
}
    a.white-out img {
        opacity: 0.2;
    }

jsFiddle Demo