容器内的CSS模糊过滤器没有剪辑答案

【问题标题】：CSS Blur filter within container without clipping容器内的CSS模糊过滤器没有剪辑
【发布时间】：2019-11-22 18:53:38
【问题描述】：

当我将鼠标悬停在父 div 上时，我的图像会转换为模糊状态。但是，如果图像是父级的 100% 宽度/高度，当模糊时，您会得到父级背景颜色的边框。所以我试着让图像说 140% 宽度/高度和/或负左/右/上/下但没有成功。这种方法确实摆脱了边框，但直到过渡结束，并且通过这种奇怪的剪辑效果，我收集到了父容器的溢出属性，我需要将其作为“隐藏”以供我使用（见例子）。请帮我弄清楚如何在没有边框的情况下获得这种模糊效果，并且在过渡结束时出现奇怪的剪裁，同时仍在经历过渡持续时间。对于我的应用程序而言，放大 120% 到 140% 的图像实际上是理想的。谢谢！

div {
    position:relative;
    width:200px;
    height:200px;
    overflow:hidden;
    margin:auto;
    background-color: red;
}
    
    img {
        position:absolute;
        width:140%;
        height:140%;
        transition-duration: 1s;
        left:-20%;
        top:-20%;
    }
    
    div:hover img {
        -webkit-filter: blur(30px);
        filter: blur(30px);
        transition-timing-function: ease-out;
    }

<div id='container'>
        <img src = 'https://i.chzbgr.com/full/9112752128/h94C6655E/'>
    </div>

【问题讨论】：

你不想从过渡中得到什么？？
只是为了模糊，但要在一秒钟内模糊
另外，父母的背景也不必是红色的。理想情况下，它是什么颜色并不重要，因为您将无法看到它。我只是将其设为红色以清楚地说明问题。
你需要 background-color: red;为 div 吗？

标签： html css filter css-transitions blur

【解决方案1】：

这是我的解决方案。我刚刚将 img 的 left & top 属性更改为 0。希望这会对您有所帮助。

div {
    position:relative;
    width:200px;
    height:200px;
    overflow:hidden;
    margin:auto;
    background-color: red;
    transition-duration: 1s;
    transition-timing-function: ease-in-out;
}
    
    img {
        position:absolute;
        width:100%;
        left:0;
        top:0;
        object-fit: cover;
        transition-duration: 1s;
        transition-timing-function: ease-out;
    }
    
    div:hover img {
        -webkit-filter: blur(30px);
        filter: blur(30px);
        transition-timing-function: ease-out;
    }
    
    div:hover {
        background-color: white;
        transition-timing-function: ease-out;
    }

<div id='container'>
        <img src = 'https://i.chzbgr.com/full/9112752128/h94C6655E/'>
    </div>

【讨论】：

这停止了一些剪辑，但仍显示挡板。看到红色，那是父母的颜色。我不希望这样，这就是我将图像设为 140% 的原因。
@HarperCreek 我已经编辑了我的解决方案。检查。我认为现在一切正常。

【解决方案2】：

一个想法是复制图像并考虑在悬停时模糊的图像底部的模糊版本。这将减少看到背景的不良影响。

#container {
  position: relative;
  width: 200px;
  height: 200px;
  overflow: hidden;
  margin: auto;
  background-color: red;
}

#container > div {
  position:absolute;
  width: 140%;
  height: 140%;
  left: -20%;
  top: -20%;
  background-size:0;
}
#container > div:before,
#container > div:after{
   content:"";
   position:absolute;
   top:0;
   left:0;
   right:0;
   bottom:0;
   background-image:inherit;
   background-size:cover;
   transition:filter 1s;
  transition-timing-function: ease-out;
}
#container> div:before,
#container:hover > div:after {
  filter: blur(30px);
}

<div id='container'>
  <div style="background-image:url(https://i.chzbgr.com/full/9112752128/h94C6655E/)"></div>
</div>

【讨论】：