模糊背景图像而不是悬停时的文字
Blurring background image not text on hover
尊敬的开发人员,您好,
我在编写 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
您不能模糊背景图像,但您可以模糊任何元素或伪元素
我会继续为您的问题提供解决方案,但是这个总结得很好。
希望对您有所帮助!
尊敬的开发人员,您好,
我在编写 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
您不能模糊背景图像,但您可以模糊任何元素或伪元素
我会继续为您的问题提供解决方案,但是这个总结得很好。
希望对您有所帮助!