拉伸模糊的图像边

Question

我想让我的 div 有模糊的边

我尝试将图像作为背景添加到 div 中并使其居中两侧为白色，我希望它们具有拉伸模糊效果

背景：url(image.jpeg) 无重复中心；

我想要类似的东西 预期代码： 背景：右边25%模糊，左边25%模糊，url(image.jpeg)无重复中心；

预期输出：

enter image description here

原图： enter image description here

Answer 1

试试这个，如果你有一个高分辨率的图像，然后用那个替换 css(.bg-image) 背景图像

.bg-image {
    background-image: url(https://i.stack.imgur.com/KGa2E.png);
    filter: blur(8px);
    -webkit-filter: blur(8px);
    height: 100%;
    background-position: left bottom;
    background-repeat: no-repeat;
    background-size: cover;
    transform: scale(1.5);
}

/* Position text in the middle of the page/image */
.bg-text {

  color: white;
  font-weight: bold;

  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 80%;
  padding: 20px;
  text-align: center;
}

<div class="bg-image"></div>

<div class="bg-text">
<img src="https://i.stack.imgur.com/KGa2E.png">

  
</div>