Question

我有一个名为＆＃34; divimg＆＃34;这是固定的，另一个div称为＆＃34; drag＆＃34;它由一个图像组成。我正在使用这个图像来拖动和调整大小，我使用了溢出来称为divimg visible。

所以我的问题是，我希望那些可见内容模糊不清。

以下是我的代码，请给我一些建议？希望你能得到我的问题。

 <script type="text/javascript">
    $(document).ready(function () {
        $("#drag").draggable({ cursor: "move" });
        $("#displayimg").resizable({ aspectRatio: true, handles: "all", maxHeight: "600", maxWidth: "600", minHeight: "100", minHeight: "100" });
    });
 </script>

<style type="text/css">
.draggable
    {
        cursor: hand;
        overflow: visible;
      left:22%;
      top:50%;
          cursor: pointer;
    }
    .resizable
    {
        width: 320px;
        height: 200px;
      /* border: 1px solid #bb0000;*/
        overflow: visible;


    }
    .resizable img
    {
        width: 100%;
        height: 100%;
    }
    .ui-resizable-handle
    {
        background: #065909;
        border: 3px solid #fff;
        border-radius:15px;

        width: 9px;
        height: 9px;
        cursor: pointer;
        z-index: 2;
    }

</style>

<form id="form1" runat="server">

<div>

 <asp:Panel ID="Panel3" runat="server" Height="373px" Width="518px" style="margin-top: 0px; margin-left: 0px; text-align: center; overflow:hidden"  >
 <div id="divimg" style=" height: 5.5cm; width: 8.6cm; left: 20%; position: relative; top: 68px; overflow:visble;"  >

         <div id="drag" class="draggable" >
         <div id="res" class="resizable" style="position:relative; overflow:visible; ">

         <asp:Image ID="displayimg" runat="server" Height="224px" Width="340px" src="images/group1.jpg" style="left:-3%; top:-3%; overflow:visible; " BorderStyle="Ridge" BorderWidth="2px"  />

         </div></div></div>
    </asp:Panel>     

 </div>
</form>

 </body>

有点像这样：

我希望那个红色边界区域模糊不清。任何帮助？

Answer 1

我得到了一个问题的答案..

.outter_div{width:400px; height: 200px;position: relative;}
.outter_div:after{content:"";border:50px solid rgba(255,255,255,0.5);position: absolute; top: 0;width: 300px;height: 100px;}
img{width: 100%;position:}

 <div class="outter_div">
       <img src="https://stepupandlive.files.wordpress.com/2014/09/3d-animated-frog-image.jpg"/>
</div>

如何为css溢出可见内容提供模糊效果

1 个答案: