如何实现图片模糊且边缘清晰效果？已有方案无效求解决

我来帮你排查一下代码里可能存在的问题，给出几个针对性的有效方案：

1. 解决 z-index 不生效或图片被遮挡的问题 #

z-index 属性只有在元素设置了非 static 的 position 值时才会生效。你的图片当前没有设置 position，加上 z-index: -1 很可能导致它被父元素或者其他页面元素遮挡，甚至完全看不到。

修改方案：
给图片添加 position: relative;，同时可以移除无效的 overflow:hidden（<img> 是替换元素，这个属性对它没用）：

.main-page-img {
  position: relative; /* 新增这行，让z-index生效 */
  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; 这行可以删除，对img元素无效 */
}

2. 优化定位方式，避免浮动+负margin的布局错乱 #

用 float:right 搭配 margin-top:-350px 来定位很容易引发周围元素的布局错位，如果你的目标是让图片固定在页面右侧上方，改用绝对定位会更可控：

修改方案：

.main-page-img {
  position: absolute;
  right: 0; /* 固定到右侧 */
  top: -350px; /* 用top替代margin-top控制垂直位置 */
  filter: grayscale(100%) blur(10px);
  width: 550px;
  height: 700px;
  z-index: -1;
  border-radius: 1000px 0px 0px 1000px;
  box-shadow: 0px 0px 30px #777777;
}

⚠️ 注意：使用绝对定位时，需要给图片的直接父元素设置 position: relative;，否则图片会相对于整个浏览器窗口定位，可能超出预期范围。

3. 排查图片路径是否正确 #

如果图片根本没有显示出来，先确认 src="images/ONamaImg.png" 的路径是否正确：

• 如果你的HTML文件在项目根目录，images 文件夹也在根目录，这个路径是对的
• 如果HTML文件在子文件夹（比如 pages/index.html），需要改成相对上级目录的路径：../images/ONamaImg.png

你可以先从第一个方案开始尝试，看看样式是否正常生效。如果还有具体的异常表现（比如图片显示不全、阴影不生效、布局错位等），可以补充说明，我再帮你进一步调整。

内容的提问来源于stack exchange，提问作者user14656666