CSS作为前端开发的重要技术之一，可以实现许多有趣的效果。其中，滤镜效果是一个受欢迎的特效之一。通过设置CSS样式，可以轻松实现图片、文字等元素的滤镜效果。

/* 给元素设置滤镜 */
.filter {
position: relative;
filter: grayscale(100%);
}

上述代码是一个简单的CSS样式，可以实现灰度滤镜的效果。其中，filter属性用于设置元素的滤镜效果，grayscale(100%)表示设置为100%的灰度。而position属性设置为relative是为了保持元素所占用的位置，避免影响页面布局。

/* 设置滤镜图层 */
.filter::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
background-color: rgba(255, 255, 255, 0.1);
}

除了前面的CSS样式，我们还需要一个滤镜图层，用于覆盖在元素上面，达到滤镜效果的目的。代码中，使用伪元素before创建了一个半透明的白色图层，宽高与父元素相同，通过z-index将其置于父元素下面。

通过以上两组CSS样式，我们就可以实现元素的滤镜效果了。当然，不同的滤镜效果需要不同的filter属性，具体可以参考CSS文档。