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>

图像边缘因拉伸而模糊

1 个答案: