How to apply CSS filter on background image
P粉722409996
2023-08-21 11:18:28
<p>I have a JPEG file that I'm using as a background image for my search page, and I'm setting it up using CSS because I'm working in a Backbone.js context: </p>
<pre class="brush:php;toolbar:false;">background-image: url("whatever.jpg");</pre>
<p>I want to apply a CSS 3 blur filter to the background only, but I'm not sure how to style just that element. If I try: </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>Just below <code>background-image</code> in my CSS, it styles the entire page, not just the background. Is there a way to select just the image and apply a filter to it? Alternatively, is there a way to just turn off the blur effect for other elements on the page? </p>
pen
Eliminates the need for extra elements and adapts content to the flow of the document rather than being fixed/absolute like other solutions.
Use the following methods to achieve:
Edit If you wish to remove the white border at the edges, use
110%
for width and height and-5%
for left and top. This will slightly enlarge your background - but there should be no solid color bleeding through the edges. Thanks to Chad Fawcett for the suggestion.View thispen.
You need to use two different containers, one for the background image and another for the content.
In the example, I created two containers,
.background-image
and.content
.They all use
position: fixed
andleft: 0; right: 0;
for positioning. The difference in their display comes from the differentz-index
values set for the elements.