发表新帖

发表新帖

Is it possible to use -webkit-filter: blur(); on background-image?

前端未结

关注

 3  1143

Is it possible to use -webkit-filter: blur(); on background-image?

I have tried this code and it just blurs everything but the background-image:

相关标签:

3条回答

借酒劲吻你

2020-12-04 15:07

FUTURE USERS: This is not supported in IE7, IE8, IE9, IE10, IE11 or the current version of EDGE.

DO NOT USE on a real site, unless you have a fallback.

If you're looking for a solution that doesn't rely on extra markup, you could apply the background image and filter to a pseudo element on the body.

body {
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
    height: 100%;
}
body:before {
    content: "";
    position: absolute;
    background: url(http://lorempixel.com/420/255);
    background-size: cover;
    z-index: -1; /* Keep the background behind the content */
    height: 20%; width: 20%; /* Using Glen Maddern's trick /via @mente */

    /* don't forget to use the prefixes you need */
    transform: scale(5);
    transform-origin: top left;
    filter: blur(2px);
}

Check it out this JsFiddle.

0 讨论(0)

2020-12-04 15:20

If background for the full page then this is the best solution for me.

body {
    //background-color: black;  use it if you don't want the background border
}
body:before {
    content: '';
    position: fixed;
    width: 100vw;
    height: 100vh;
    background-image: url('http://www.publicdomainpictures.net/pictures/10000/velka/pebbles-and-sea-11284647414Rbeh.jpg'); // your image
    background-position: center center;
    background-repeat: no-repeat;
    background-position: 100% 100%;
    background-size: cover;
    filter: blur(2px);
    z-index: -9;
}

0 讨论(0)

再見小時候

2020-12-04 15:22

Don't apply it to the body, apply it to a full size container as below, set the container size and position to absolute and then the rest of the content to relative and set the z-indexes.

<body>
<div class="bgImageContainer">
</div>
<div class="content"> Some text and stuff here</div>
</body>

.bgImageContainer{
    background-image:url('http://www.whitegadget.com/attachments/pc-wallpapers/16950d1224057972-landscape-wallpaper-blue-river-scenery-wallpapers.jpg'); 
    width:500px;
    height:400px;
    -webkit-filter: blur(5px);
    z-index:0;
    position:absolute;
}
.content{
    z-index:10;
    position:relative;
}

Edit - Updated the fiddle, the old image wasn't working any more.

http://jsfiddle.net/Yr2zD/1130/

0 讨论(0)

热议问题