背景影像如何使用CSS濾鏡效果
P粉022285768
2023-08-20 13:28:36
<p>我有一個JPEG文件,我正在將其用作搜尋頁面的背景圖像,並且我正在使用CSS進行設置,因為我正在Backbone.js上下文中工作:</p>
<pre class="brush:php;toolbar:false;">background-image: url("whatever.jpg");</pre>
<p>我想只對背景套用CSS 3模糊濾鏡,但是我不確定如何僅對該元素進行樣式設定。如果我嘗試:</p>
<pre class="brush:php;toolbar:false;">-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);</pre>
<p>將上述程式碼放在我的CSS中的<code>background-image</code>下面,它會對整個頁面進行樣式設置,而不僅僅是背景。有沒有辦法僅選擇影像並將濾鏡套用到該影像?或者,有沒有辦法僅關閉頁面上的其他元素的模糊效果? </p>
pen
廢除了額外元素的需求,使內容適應文件流而不像其他解決方案那樣固定/絕對。
使用以下方式實作
編輯 如果您想要移除邊緣的白色邊框,請使用
110%
的寬度和高度以及-5%
的左邊和頂部。這樣會稍微放大您的背景影像,但邊緣不會有實色滲入。感謝Chad Fawcett的建議。查看這個筆記本。
您將需要使用兩個不同的容器,一個用於背景映像,另一個用於內容。
在範例中,我建立了兩個容器,
.background-image
和.content
。它們都使用了
position: fixed
和left: 0; right: 0;
來定位。它們顯示的差異來自於為元素設定的不同z-index
值。