图像边因拉伸而模糊

Question

我想要我的 div

有模糊的一面

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

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

我想要类似的东西预期代码：背景：右侧模糊 25%，左侧模糊 25%，url(image.jpeg) no-repeat center center;

预期输出：

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>

图像边因拉伸而模糊

Image sides blurred by stretching

css

image

background-image