Question

我的图片有问题。我试图模糊图像的一部分，但我的解决方案无法正常工作。请看一下这段代码：

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;
}

在CSS中有可能吗？

Answer 1

我已将外部overflow的{{1}}属性设置为div，将内部hidden设置为margin-right，它就像一个魅力

-1

以下是JSFiddle中的工作示例。

Answer 2

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

Answer 3

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

内心div position:absolute。这是模糊出现的地方。将模糊应用于:before选择器。

JSFiddle Demo

Answer 4

使用margin-top和margin-left定位模糊的叠加层，使用height和width定义叠加层的大小以及使用background-position定义叠加层的位置：< / p>

background-position: -60px 880px;
filter: blur(3px);
height: 300px;
width: 300px;
margin-left: 60px;
margin-top: 144px;

#image {
    width: 400px;
    height: 500px;
    overflow: hidden;
    background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/3/37/Generic_Camera_Icon.svg/1213px-Generic_Camera_Icon.svg.png');
}

#image .blur {
    background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/3/37/Generic_Camera_Icon.svg/1213px-Generic_Camera_Icon.svg.png);
    background-position: -60px 880px;
    filter: blur(3px);
    height: 300px;
    width: 300px;
    margin-left: 60px;
    margin-top: 144px;
}

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

使用CSS模糊图像的一部分

4 个答案: