【问题标题】: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; 
      }
      

      输出

      输出如下所示:

      【讨论】: