要实现响应式图片滤镜效果，可以使用CSS中的@media查询和滤镜属性。具体步骤如下：
1.首先，在HTML中插入一个img元素，用于显示要添加滤镜效果的图片。
2.然后，在CSS中设置img元素的样式，包括宽度、高度和位置等属性。
3.接着，使用@media查询来确定不同屏幕大小下要应用的滤镜效果。例如，对于较小的屏幕，可以应用灰度滤镜，而对于较大的屏幕，则可以应用模糊滤镜。
4.最后，使用CSS中的滤镜属性来设置所需的滤镜效果。例如，可以使用“-webkit-filter: grayscale(100%);”来应用灰度滤镜，使用“-webkit-filter: blur(5px);”来应用模糊滤镜。
下面是一个示例代码，演示如何使用CSS实现响应式图片滤镜效果：
HTML代码：
<div class="image-container">
<img src="image.jpg" alt="Image">
</div>CSS代码：
.image-container {
position: relative;
width: 100%;
height: auto;
}
.image-container img {
width: 100%;
height: auto;
}
@media screen and (max-width: 768px) {
.image-container img {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
}
@media screen and (min-width: 769px) {
.image-container img {
-webkit-filter: blur(5px);
filter: blur(5px);
}
}当屏幕宽度小于等于768px时，图片会应用灰度滤镜；当屏幕宽度大于768px时，图片会应用模糊滤镜。