边缘的CSS3过滤器不起作用

Question

制作此网站并在照片上使用filter: grayscale(100%);与背景图片进行对比。 它适用于MS Edge中的任何地方。

https://dev.logic4.nl/over-logic4/team/

尝试在没有其他css样式的情况下构建它并且完美运行：

https://dev.logic4.nl/wp-content/themes/logic4/test.html

还尝试剥离我的CSS，当我删除所有内容时，它会运行灰度等级！不知道我做错了什么。

这是css类+ html

    .team-photo{
        float: left;
        width: 38%;
        background-size: cover;
        background-position: top center;
        .transition-lin;
        filter: grayscale(100%);
     }
    <div class="team-photo" style="background-image: url('<?php echo get_avatar_url( $author->ID, array('size' => 400)); ?>');"></div>