使用CSS模糊图像的一部分

我对图像有问题。我试图模糊图像的一部分，但我的解决方案无效。请看看下面的代码：使用CSS模糊图像的一部分

HTML文件

<div id="image"> 
    <div class="blur"></div> 
</div>

CSS文件

#image { 
    width: 940px; 
    height: 360px; 
    background-image: url('../img/photo.png'); 
} 

#image .blur { 
    background-image: url('../img/photo.png'); 
    background-position: center right; 
    -webkit-filter: blur(3px); 
    -moz-filter: blur(3px); 
    -o-filter: blur(3px); 
    -ms-filter: blur(3px); 
    filter: blur(3px); 
    filter: blur(3px); 
    float: right; 
    height: 100%; 
    width: 360px; 
}

它看起来就像这样：http://img.pl/THng.png。它超越了形象。我想创建这样的尖锐轮廓：http://img.pl/VHng.png。

这是可能的CSS？

来源

2014-10-08 user3097025

你可能会找到答案[这里]（http://stackoverflow.com/questions/12224320/defined-edges-with-css3-filter-blur）或者[这里]（HTTP：// stackoverflow.com/questions/17212984/how-to-have-an-image-with-css-filterblur-and-sharp-edges）。 – 2014-10-08 19:57:06

我会说，@卡伦的回答比较好。我可以重现哈森姆的问题，但没有简单的解决方法。你应该接受他的回答，然后我删除我的回答。 – Boldewyn 2014-10-09 07:42:19

我已经设置了外div到hidden和内一个-1的margin-right的overflow性质和它的工作就像一个魅力。

#image { 
    ... 
    overflow: hidden; 
} 

#image .blur { 
    ... 
    margin-right: -1px; 
}

以下是JSFiddle中的工作示例。

来源

2014-10-08 19:53:19

HTML 

    <body> 
     <div id="photoContainer"><img id="image" src="http://www.cpplcounseling.com/uploads/4/6/8/2/46828361/2181364_orig.jpg"/title="Double click to mask" width="100%"></div> 

     <br> 
     <button id="mask">Mask</button> 
     <button id="undoMask">Undo Mask</button> 
     <button id="unMask">UnMask</button> 
     <button id="save">Save</button> 
     <button id="getSaved">Get Saved</button> 
     <br> 
     <br> 
     <i>Note : Double click on particular portion of the image to mask that spot</i> 
    </body> 

JS 


    $(document).ready(function() { 
     var maskStyles = []; 
     $("#image").click(function() { 
     $(".imageMask").draggable({ 
      disabled: true 
     }).resizable({ 
      disabled: true 
     }); 
     $(".imageMask").addClass("blur"); 
     }); 
     $("#image").dblclick(function(e) { 
     var x = e.offsetX; 
     var y = e.offsetY; 
     $(".imageMask").draggable({ 
      disabled: true 
     }).resizable({ 
      disabled: true 
     }); 
     $(".imageMask").addClass("blur"); 
     $("#photoContainer").append('<div class="imageMask ui-draggable ui-draggable-handle ui-resizable" style="left: ' + (x - 3) + 'px; top: ' + (y - 3) + 'px;"></div>'); 
     $("#photoContainer .imageMask:last-child").draggable({ 
      containment: 'parent' 
     }).resizable({ 
      handles: 'all' 
     }); 
     }); 
     $("#mask").click(function() { 
     $(".imageMask").draggable({ 
      disabled: true 
     }).resizable({ 
      disabled: true 
     }); 
     $(".imageMask").addClass("blur"); 
     $("#photoContainer").append('<div class="imageMask ui-draggable ui-draggable-handle ui-resizable" style="left: 65px; top: 55px;"></div>'); 
     $("#photoContainer .imageMask:last-child").draggable({ 
      containment: 'parent' 
     }).resizable({ 
      handles: 'all' 
     }); 
     }); 
     $("#undoMask").click(function() { 
     if ($("#photoContainer .imageMask:last-child").hasClass("blur")) { 
      $("#photoContainer .imageMask:last-child").removeClass("blur"); 
      $("#photoContainer .imageMask:last-child").draggable({ 
      disabled: false 
      }).resizable({ 
      disabled: false, 
      handles: 'all' 
      }); 
     } else { 
      $("#photoContainer .imageMask:last-child").remove(); 

     } 
     }); 
     $("#unMask").click(function() { 

     $("#photoContainer .imageMask").remove(); 
     }); 
     $("#save").click(function() { 
     maskStyles = []; 
     $("#photoContainer .imageMask").each(function(i, obj) { 
      maskStyles.push(obj.getAttribute("style")); 
     }); 
     console.log(maskStyles); 
     }); 

     $("#getSaved").click(function() { 
     for (maskStyle in maskStyles) { 
      $("#photoContainer").append('<div class="imageMask ui-draggable ui-draggable-handle ui-resizable blur" style="' + maskStyles[maskStyle] + '"></div>'); 
     } 
     $("#photoContainer .imageMask").draggable({ 
      containment: 'parent', 
      disabled: true 
     }).resizable({ 
      disabled: true, 
      handles: 'all' 
     }); 
     $("#image").trigger('click'); 
     }); 
    }); 

CSS 



    .imageMask { 
     background-color: #131212; 
     opacity: .75; 
     position: absolute; 
     left: 85px; 
     top: 66px; 
     width: 30px; 
     height: 30px; 
    } 

    .imageMask:hover { 
     cursor: move; 
    } 

    #photoContainer {} 

    .blur { 
     -webkit-filter: blur(3px); 
     filter: blur(3px); 
     opacity: 1; 
     cursor: default!important; 
    } 

.ui-resizable { 
     position: relative; 
    } 

    .ui-resizable-handle { 
     position: absolute; 
     font-size: 0.1px; 
     z-index: 99999; 
     display: block; 
    } 

    .ui-resizable-disabled .ui-resizable-handle, .ui-resizable-autohide .ui-resizable-handle { 
     display: none; 
    } 

    .ui-resizable-n { 
     cursor: n-resize; 
     height: 7px; 
     width: 100%; 
     top: -5px; 
     left: 0; 
    } 

    .ui-resizable-s { 
     cursor: s-resize; 
     height: 7px; 
     width: 100%; 
     bottom: -5px; 
     left: 0; 
    } 

    .ui-resizable-e { 
     cursor: e-resize; 
     width: 7px; 
     right: -5px; 
     top: 0; 
     height: 100%; 
    } 

    .ui-resizable-w { 
     cursor: w-resize; 
     width: 7px; 
     left: -5px; 
     top: 0; 
     height: 100%; 
    } 

    .ui-resizable-se { 
     cursor: se-resize; 
     width: 12px; 
     height: 12px; 
     right: 1px; 
     bottom: 1px; 
    } 

    .ui-resizable-sw { 
     cursor: sw-resize; 
     width: 9px; 
     height: 9px; 
     left: -5px; 
     bottom: -5px; 
    } 

    .ui-resizable-nw { 
     cursor: nw-resize; 
     width: 9px; 
     height: 9px; 
     left: -5px; 
     top: -5px; 
    } 

    .ui-resizable-ne { 
     cursor: ne-resize; 
     width: 9px; 
     height: 9px; 
     right: -5px; 
     top: -5px; 
    }

Fiddle Demo

来源

2016-01-12 13:08:53 Nofi

为您选择外层div合适background-position。

Make inner divposition:absolute。这是模糊出现的地方。将模糊应用于:before选择器。

JSFiddle Demo

来源

2016-09-27 11:11:18 Srinivasan