如何使图像模糊但边缘清晰答案

【问题标题】：How to make image blurred but make edges crisp如何使图像模糊但边缘清晰
【发布时间】：2021-03-02 23:50:57
【问题描述】：

请不要说“哦，那里有很多答案”之类的话。我创立了很多，但没有一个奏效。这是 HTML：

<img src="images/ONamaImg.png" class="main-page-img">（当然不是所有的 HMTL，只有图片代码）

这里是 CSS：

.main-page-img 
{
    filter: grayscale(100%) blur(10px);
    float: right;
    width: 550px;
    height: 700px;
    z-index: -1;
    border-radius: 1000px 0px 0px 1000px;
    margin-top: -350px;
    box-shadow: 0px 0px 30px #777777;
    overflow:hidden;
}

谢谢！

【问题讨论】：

标签： html css border blur

【解决方案1】：

首先，将图像包装在一个容器中：

<div class="container">
    <img src="path/to/image.jpg">
</div>

然后，将这些 css 规则添加到容器和图像中：

.container {
    overflow: hidden;
    height: /*add height*/;
    width: /*add width*/;
}

img {
    margin: -10px;
}

注意：我没有添加其他样式。确保添加它们。

基本概念是将模糊图像包裹在容器中，并使用负边距裁剪模糊边缘。

【讨论】：

【解决方案2】：

我还发现了很多没有解决问题的答案。这是我的尝试：

HTML

首先我创建了一个容器并添加了一个图像用作清晰的边框。

<div class="container">
  <img class="border-img" src="https://pbs.twimg.com/profile_images/2209676047/gatinho-5755_400x400.jpg" />
  <div class="blur-img"></div>
</div>

CSS

然后我使用相同的图像作为容器内 epty div 的背景。在 div 背景中，我可以缩放和调整图像，使其看起来像一个。

.container {
  width: 450px; 
  height: 500px;
  overflow:hidden;
}

.blur-img {
  width: 70%;
  height: 70%;
  background-image: url("https://pbs.twimg.com/profile_images/2209676047/gatinho-5755_400x400.jpg");
  background-position: center;
  transform: scale(1.2); /* use scale to zoom image */
  filter: blur(10px);
  position:relative;  /* adjust position */
  left:15%;
  top:15%;
}

.border-img {
  width: 450px;
  height: 500px;
  position:fixed; 
}

输出

输出如下所示：

【讨论】：