使使用边框半径的图像模糊，导致边缘没有边框半径-解网

问：

我有一个具有 border-radius 属性的图像，我希望它在悬停在其上时模糊。但是当我将鼠标悬停在它上面时，模糊会应用，但 border-radius 属性不会应用。我该如何解决这个问题？

我尝试将 border-radius 添加到不同的类，但没有一个有效。

我不确定要共享什么代码。也许这可能会有所帮助。.entry-thumbnail 指的是图片帖子：

    .entry-thumbnail {

        position: relative;

        .entry-thumbnail:after {
            display: block;
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 99;
            opacity: 0;
            transition: opacity 200ms linear;
        }

    }

}

a:hover .entry-thumbnail:after {
    opacity: 1;
}

.secondary {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 101;
    opacity: 0;
    transition: opacity 200ms linear;
}
a:hover .secondary, a.hover .secondary {
    opacity: 1;
}

我添加的是这样的：

img {
    border-radius: 10px;
}

img:hover {
    -webkit-filter: blur(4px); /* Chrome, Safari, Opera */
    filter: blur(10px);
}

css 边框半径

您的问题似乎缺少一些细节。如果你需要代码方面的帮助，如果你不显示你需要帮助的代码，任何人都不可能帮助你。为了帮助您，我们需要直接在您的问题中提供最小可重复示例。请编辑您的问题并为您的问题添加一些代码。

0赞 rtk 9/6/2023

@ChrisBarr我添加了一些代码，但我不确定它是否是正确的部分......

0赞 Chris Barr 9/6/2023

知道它是否正确的方法是添加相关的 HTML，然后查看您添加的代码是否复制了您描述的内容

答：

2赞 MincedMeatMole 9/6/2023 #1

我认为你的模糊有点强，如果你想保持清晰的边框半径，你必须把它包裹在一个具有边框半径和overflow: hidden

.wrapper {
  overflow: hidden;  
  border-radius: 20px;
  width: 200px;
  height: 200px;
}
img {
  &:hover {
    filter: blur(5px);
  }
}

<div class="wrapper">
  <img src="https://placehold.co/200x200" />
</div>

使使用边框半径的图像模糊，导致边缘没有边框半径

Making an image using border-radius blurred causing the edges to not have border-radius

评论

评论