html - 如何在图像上创建图案叠加层

Question

我希望我的博文缩略图具有点状叠加效果。我发现所有 CSS background-image 都受控的解决方案。但是使用这样的解决方案很难更改缩略图。

基本上我想要的是这样的:

                <div class="blog-image">
                    <div class="pixel-overlay"></div>
                    <img class="img-responsive" src="assets/img/post1.jpg">              
                </div>

然后缩略图是 a，因此您可以轻松控制其他帖子的来源。

我确实尝试了很多很多东西，但我从来没有让它工作过。像素覆盖 div 将始终将 IMG 推开。

那么我怎样才能创建一个没有像 background-image: "assets/img/post1.jpg"这样的东西的叠加层.........

Answer 1

只需使用此 CSS 以绝对定位的全尺寸图案元素覆盖图像:

.blog-image {
    position: relative;
    display: inline-block;
}
.pixel-overlay {
    position:absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: url('path/to/pattern.png'); /* or any other overlay image/color */
}

并在图像之后添加pixel-overlay元素:

<div class="blog-image">
    <img class="img-responsive" src="assets/img/post1.jpg">
    <div class="pixel-overlay"></div>
</div>

像这样:http://jsfiddle.net/Fx7HC/