最近在寫一個網站前端頁面的時候，發現使用 CSS 的 filter 屬性無效，經過一番調查和嘗試，我總結了一些可能導致 filter 無效的原因。

代碼如下：
img {
filter: grayscale(100%);
}

1.瀏覽器兼容性問題

filter 屬性在不同瀏覽器中的兼容性并不一致，可能會導致在某些瀏覽器上顯示正常，而在另一些瀏覽器上無法正常顯示。

對于這種情況，我們可以使用各個瀏覽器的特定前綴，例如 Webkit（Chrome 和 Safari 瀏覽器）和 Mozila （火狐瀏覽器）。

代碼如下：
img {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
-moz-filter: grayscale(100%);
}

2.元素不支持 filter 屬性

在某些情況下，元素可能不支持 filter 屬性，例如輸入框、按鈕等，這會導致 filter 屬性無效。

此時，我們可以嘗試將 filter 屬性應用于元素所包含的子元素，以達到相同的效果。

代碼如下：
div {
width: 200px;
height: 200px;
background-color: #cccccc;
}
div img {
filter: grayscale(100%);
}

3.元素的層級問題

如果元素的層級比其他元素更高，那么 filter 屬性將無法正常顯示。

代碼如下：
div {
filter: blur(10px);
z-index: 999;
}

在這種情況下，我們可以將元素的 z-index 值調整為更低的層級，或者將其他層級更高的元素透明化一些，以便 filter 正常顯示。

綜上所述，我們在使用 filter 屬性時，需要考慮到這些常見的問題，以確保它能夠正常顯示在我們的網站上。