如何在图像上创建一个图案叠加层

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"这样的东西呢？

- user3411864

---

你能发一下你想要的屏幕截图吗？我无法理解这个效果是什么。 - Ani

可能是重复的问题：如何叠加图像。 - Paulie_D

不是我做的，但有人做了这个：http://jsfiddle.net/weissraum/yF3Zx/ 值得研究一下。 - Ani

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/

- S.B.

Answer 2

我想在 CSS 的背景图像类别下放置一个 2 像素 x 2 像素的点 PNG 图像。这将看起来像这样：

.image-class {
    background: transparent url(../images/pattern.png) repeat top left;
}

- a wan