与-webkit过滤器的战斗：模糊，而不是实体边缘（使用过滤器：模糊） [英] Fighting with -webkit-filter: blur and not solid edges (works with filter: blur)
问题描述
body {
background：black;
}
.wrap {
background：green;
width：200px;
height：200px;
position：relative;
overflow：hidden;
background：white url（'https://cdn.sstatic.net/stackexchange/img/logos/so/so-icon.png'）;
}
.image {
position：absolute;
left：-15px;
右：-15px;
top：-15px;
bottom：-15px;
background：white url（'https://cdn.sstatic.net/stackexchange/img/logos/so/so-icon.png'）;
-webkit-filter：blur（15px）;
-moz-filter：blur（15px）;
filter：blur（15px）;
}
EDIT see this pen of Alexander Omara for a shorter version of my pen
basically we set the bg span to always be more than full screen, even on resize. The blurry edges should be removed by using the known "use a container around the image that is smaller than the image" to cut off the blurry edges. This container has the size of the actual screen view port.
Now this works perfectly fine in the newest firefox 35.
But it fails so hard in webkit browsers e.g. tested in chrome 40.0.2214.91 m.
First of all, there is the green bg from body visible, after the text it disappears ?! and shows a whitish blur.
That's not even all, if you use the horizontal scroll (i don't really want a horizontal scroll actually)
The greenish background from the body disappears . If you scroll left again, it reappears. The blurry edge is coming from the edge of the browser window, next to the scrollbar, it is not coming from the actual image edge. You can see it by the green background, when scrolling left and right, and that the green turns into white.
Magic.
Pull the plug on this and have our webkit community fix it. Or is there a fix to this I somehow am overlooking?
Source:
HTML
<span class="lux-section" ><span class="bg" ></span><span><br><br><br><br><br>About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us<br></span></span>
CSS
.lux-section .bg {
position: absolute;
width: 100%;
height: 100%;
background: url(http://s15.postimg.org/4elomwgbv/luxvitae.jpg) center center scroll no-repeat;
background-size: 100% auto;
-webkit-filter: blur(15px);
-moz-filter: blur(15px);
filter: blur(15px);
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
z-index: -1;
display: inline-block;
}
body{
background-color: green;
margin: 0;
}
JS
lux = {};
function reinitSizes(){
lux.viewWidth = $(window).width() ;
lux.viewHeight = $(window).height() ;
//enclosing span of the bg image and the text
$(".lux-section").css({
"width": lux.viewWidth,
"height": lux.viewHeight
});
//resize the bg image to be bigger than it's enclosing span.
$(".lux-section > .bg").each(function(index, bgObj){
var blur = 15;
var resized = blur * blur;
$(bgObj).css({
"width": (lux.viewWidth + resized),
"height": (lux.viewHeight + resized),
"top" : Math.round(-0.5*resized),
"left": Math.round(-0.5*resized)
});
});
}
$(function(){
reinitSizes();
$(window).resize(function() {
reinitSizes();
});
});
You can try this trick.
Apply the same image you are blurring to the div container
Example here:
http://codepen.io/anon/pen/aOoNGV
body {
background: black;
}
.wrap {
background: green;
width: 200px;
height: 200px;
position: relative;
overflow: hidden;
background: white url('https://cdn.sstatic.net/stackexchange/img/logos/so/so-icon.png');
}
.image {
position: absolute;
left: -15px;
right: -15px;
top: -15px;
bottom: -15px;
background: white url('https://cdn.sstatic.net/stackexchange/img/logos/so/so-icon.png');
-webkit-filter: blur(15px);
-moz-filter: blur(15px);
filter: blur(15px);
}
这篇关于与-webkit过滤器的战斗：模糊，而不是实体边缘（使用过滤器：模糊）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
