我有一個JPEG文件，我正在將其用作搜尋頁面的背景圖像，並且我正在使用CSS進行設置，因為我在Backbone.js上下文中工作：
background-image: url("whatever.jpg"); 我想只將CSS 3模糊濾鏡套用到背景，但我不確定如何僅對該元素進行樣式設定。如果我嘗試：
-webkit-filter: blur(5px); -moz-filter: blur(5px); -o-filter: blur(5px); -ms-filter: blur(5px); filter: blur(5px);
就在我的CSS中的background-image下面，它會對整個頁面進行樣式設置，而不僅僅是背景。有沒有辦法僅選擇圖像並對其應用濾鏡？或者，有沒有辦法僅關閉頁面上的其他元素的模糊效果？
pen
消除了額外元素的需要，並使內容適應文件流，而不是像其他解決方案那樣固定/絕對。
使用以下方式實作：
.content { /* this is needed or the background will be offset by a few pixels at the top */ overflow: auto; position: relative; } .content::before { content: ""; position: fixed; left: 0; right: 0; z-index: -1; display: block; background-image: url('https://i.imgur.com/lL6tQfy.png'); background-size:cover; width: 100%; height: 100%; -webkit-filter: blur(5px); -moz-filter: blur(5px); -o-filter: blur(5px); -ms-filter: blur(5px); filter: blur(5px); }編輯如果您希望刪除邊緣的白色邊框，請使用
110%的寬度和高度以及-5%的左邊和頂部。這將稍微放大您的背景 - 但邊緣不應有實心顏色滲入。感謝Chad Fawcett的建議。.content { /* this is needed or the background will be offset by a few pixels at the top */ overflow: auto; position: relative; } .content::before { content: ""; position: fixed; top: -5%; left: -5%; right: -5%; z-index: -1; display: block; background-image: url('https://i.imgur.com/lL6tQfy.png'); background-size:cover; width: 110%; height: 110%; -webkit-filter: blur(5px); -moz-filter: blur(5px); -o-filter: blur(5px); -ms-filter: blur(5px); filter: blur(5px); }查看這個pen。
你需要使用兩個不同的容器，一個用於背景圖片，另一個用於內容。
在範例中，我建立了兩個容器，
.background-image和.content。它們都使用
position: fixed和left: 0; right: 0;來定位。它們顯示的差異來自於為元素設定的不同z-index值。.background-image { position: fixed; left: 0; right: 0; z-index: 1; display: block; background-image: url('https://i.imgur.com/lL6tQfy.png'); width: 1200px; height: 800px; -webkit-filter: blur(5px); -moz-filter: blur(5px); -o-filter: blur(5px); -ms-filter: blur(5px); filter: blur(5px); } .content { position: fixed; left: 0; right: 0; z-index: 9999; margin-left: 20px; margin-right: 20px; }