html - 白色叠加在图像上

Question

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

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

CSS 是基本的

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

Answer 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

---

方案二:

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

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

jsFiddle Demo