Question

我希望我的博客帖子缩略图给出虚线叠加效果。我发现所有CSS背景图像控制的解决方案。但是通过这样的解决方案，更改缩略图会更加困难。

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

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

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

我确实尝试过很多东西，但我从来没有尝试过。像素叠加div将始终将IMG推开。

那么如何在没有背景图像的情况下创建叠加层：＆＃34; assets / img / post1.jpg＆＃34; .........

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/

Answer 2

在背景图像类下的CSS列表中，我将有一个2px x 2px png的点图像。所以看起来像这样：

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

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

2 个答案: