Question

亲爱的开发人员，您好

通过对Post网格进行编码来解决问题。我想在悬停时模糊背景图像。但是我的文字（在同一个div中也模糊不清）。你有解决方案吗？或者没有其他方法，没有在容器中的新div中使用此图片。想将其保留为背景图像

帖子php：

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
            <div class="article" style="background-image: url(<?php echo the_post_thumbnail_url(); ?>);" onclick="self.location.href='<?php echo get_permalink( $leavename = false ); ?>'">
                <div class="post_info">
                    <span class="post_cat"><?php the_category(' ') ?></span>
                    <h2 class="post_title"><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
                    <span class="post_date"><?php the_time('d.m.Y') ?></span>
                </div>

            <!-- .article --></div>

css：

.article:hover {
-webkit-filter: blur(2px);
}
.article {
margin-top: 15px;
position: relative;
height: 229px;
margin-left: 15px;
margin-right: 15px;
float: left;
width: 25%;
cursor: pointer;
}

感谢您帮助我，ExotiQ

Answer 1

您无法模糊背景图片，但您可以模糊任何元素或伪元素

我会继续解决你的问题，但是这个总结得很好。 Check out this awnser

希望能帮到你！

模糊背景图像不是悬停的文本

1 个答案: