javascript - 是否可以删除对整个 div 的特定区域的 css 模糊效果

Question

我有一个带有模糊效果的背景图片的 div。

html

 <div class="background-image"></div>
 <div class="content">
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis aliquam erat in ante malesuada, facilisis semper nulla semper. Phasellus sapien neque, faucibus in malesuada quis, lacinia et libero. Sed sed turpis tellus. Etiam ac aliquam tortor, eleifend rhoncus metus. Ut turpis massa, sollicitudin sit amet molestie a, posuere sit amet nisl. Mauris tincidunt cursus posuere. Nam commodo libero quis lacus sodales, nec feugiat ante posuere. Donec pulvinar auctor commodo. Donec egestas diam ut mi adipiscing, quis lacinia mauris condimentum. Quisque quis odio venenatis, venenatis nisi a, vehicula ipsum. Etiam at nisl eu felis vulputate porta.</p>
     <p>Fusce ut placerat eros. Aliquam consequat in augue sed convallis. Donec orci urna, tincidunt vel dui at, elementum semper dolor. Donec tincidunt risus sed magna dictum, quis luctus metus volutpat. Donec accumsan et nunc vulputate accumsan. Vestibulum tempor, erat in mattis fringilla, elit urna ornare nunc, vel pretium elit sem quis orci. Vivamus condimentum dictum tempor. Nam at est ante. Sed lobortis et lorem in sagittis. In suscipit in est et vehicula.</p>
 </div>

CSS

 .background-image {
    position: fixed;
    left: 0;
    right: 0;
    z-index: 1;
    background-size:100% 100%;
    display: block;
    background-image: url('a.JPG');
    width: 1200px;
    height: 800px;

   -webkit-filter: blur(10px);
   -moz-filter: blur(10px);
   -o-filter: blur(10px);
   -ms-filter: blur(10px);
    filter: blur(10px);
 }

当我将鼠标悬停在 backgroung-image div 上时，我想移除鼠标指针所在位置的模糊效果。是否可以从 jquery.这是我想要实现的例子。 example

Answer 1

我用 jQuery 解决方案创建了一个 fiddle 。它模糊了图像的悬停部分。希望对您有所帮助:

Fiddle

jQuery

$('.pic').mousemove(function(event){
    event.preventDefault();
    var upX=event.clientX;
    var upY=event.clientY;
    $('#blurr').css({'display':'block','top':''+(upY-15)+'px','left':''+(upX-15)+'px'});
});

CSS

.pic{
    display:inline-block;
}
/*below CSS for the blurring div*/
#blurr{
    position:absolute;
    display:none;
    width:30px;
    height:30px;
    background-color:rgb(240,240,240);
    border-radius:50%;
    -moz-border-radius:50%;
    -webkit-border-radius:50%;
    box-shadow:0px 0px 10px 10px white;
    -moz-box-shadow:0px 0px 10px 10px white;
    -webkit-box-shadow:0px 0px 10px 10px white;
    opacity:0.8;
    filter:alpha(opacity=80); /* For IE8 and earlier */
}

---

2014 年 2 月 28 日更新

Fiddle : Reveal part of transparent-overlayed image

HTML

<div id="container">
    <div class="blurPic"></div>
    <img src="http://i.imgur.com/IGKVr8r.png" alt="follow picture" />
</div>

CSS

html,body{
    margin:0px;
    padding:0px;
}
#container{
    position:relative;
}
.blurPic{
    position:absolute;
    top:0px;
    left:0px;
    width:0px;
    height:0px;
    box-shadow:0px 0px 0px 160px white inset; 
    -moz-box-shadow:0px 0px 0px 160px white inset; 
    -webkit-box-shadow:0px 0px 0px 160px white inset; 
    -ms-box-shadow:0px 0px 0px 160px white inset; 
    opacity:0.9;
    filter:alpha(opacity=0.9); /* For IE8 and earlier */
}

jQuery

/**Give equal width and height as <img> to .blurPic**/
var hgt = $('.blurPic').width($('#container img').width());
$('.blurPic').height($('#container img').height());
/*****************************************************/

/*******Get shadow values*****/
var result = $('.blurPic').css('boxShadow').match(/(-?\d+px)|(rgb\(.+\))/g)
var color = result[0],
    y = result[1],
    x = result[2],
    blur = result[3];
/******************************/

/**Change box-shadow on mousemove over image**/
var blurStartW = hgt.width()/2;
var blurStartH = hgt.height()/2;
$('.blurPic').mousemove(function(event){
    event.preventDefault();
    var scrollLeftPos = $(window).scrollLeft(),
    scrollTopPos = $(window).scrollTop(),
    offsetLft = hgt.offset().left,
    offsetTp = hgt.offset().top;
    var upX=event.clientX;
    var upY=event.clientY;
    $(this).css({boxShadow : ''+(-offsetLft+upX-blurStartW+scrollLeftPos)+'px '+(-offsetTp+upY-blurStartH+scrollTopPos)+'px 20px 100px white inset'});
});
/*********************************************/

/***reset box-shadow on mouseout***/
$('.blurPic').mouseout(function(){
    $(this).css({boxShadow : '0px 0px 0px 160px white inset'});
});
/**********************************/

---

2014 年 3 月 1 日更新

[Fiddle:显示模糊图像的一部分][3]

上面的 fiddle 使用了 [Vague.js][4] 因为 CSS3 模糊可能不适用于所有浏览器

HTML

<div id="container">
    <img src="http://i.imgur.com/IGKVr8r.png" alt="follow picture" />
    <div class="revealPic"></div>
</div>

CSS

html,body{
    margin:0px;
    padding:0px;
}
#container{
    position:relative;
    margin-left:100px;
    display:inline-block;
}
.revealPic{
    position:absolute;
    top:0px;
    left:0px;
    background-image:url('http://i.imgur.com/IGKVr8r.png');
    background-color:white;
    background-position:0px 0px;
    background-repeat:no-repeat;
    width:50px;
    height:50px;
    /*making div circular*/
    border-radius:50%;
    -moz-border-radius:50%;
    -webkit-border-radius:50%;
    -ms-border-radius:50%;
    -khtml-border-radius: 50%;
}

jQuery

var hgt = $('#container'),
    bgt = $('#container .revealPic');

var bgtHalfW = bgt.width()/2,
    bgtHalfH = bgt.height()/2;

/**Change position of .revealPic and background-image within it on mousemove over container**/
hgt.mousemove(function(event){
    event.preventDefault();
    bgt.show();
    var scrollLeftPos = $(window).scrollLeft(),
    scrollTopPos = $(window).scrollTop(),
    offsetLft = hgt.offset().left,
    offsetTp = hgt.offset().top;
    var upX=event.clientX;
    var upY=event.clientY;
    bgt.css({backgroundPosition : ''+(offsetLft-upX+bgtHalfW-scrollLeftPos)+'px '+(offsetTp-upY+bgtHalfH-scrollTopPos)+'px',top:''+(-offsetTp+upY-bgtHalfH+scrollTopPos)+'px',left:''+(-offsetLft+upX-bgtHalfW+scrollLeftPos)+'px'});
});
/*********************************************/

/*Hide .revealPic div on mouseout*/
hgt.mouseout(function(){
    bgt.hide();
});
/*********************************/

/*Using vague.js to make blurred image*/
var vague = $("#container img").Vague({intensity:10});
vague.blur();
/**************************************/