如何在图像顶部创建图案叠加

Question

我希望我的博客文章缩略图具有点状叠加效果。我找到了所有 CSS 背景图像控制的解决方案。但是使用这样的解决方案更难更改缩略图。

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

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

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

我确实尝试了很多很多东西，但我从来没有让它工作。像素叠加 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/