时间戳

首页 > 解决方案 > 拉伸模糊的图像边

css - 拉伸模糊的图像边

问题描述

我想让我的 div 有模糊的一面

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

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

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

预期输出：

在此处输入图像描述

原始图像： 在此处输入图像描述

标签： cssimagebackground-image

解决方案

试试这个，如果你有一个高分辨率图像，然后用那个替换 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>

推荐阅读