我假设 UI 弹出窗口在边框附近是灰色的，背景图片可以有各种灰色区域，包括黑色和白色。

问题在于 UI 弹出窗口和背景之间的对比度变化不可预测，并且可能为零。
甚至弹出框的整个边框都可以与相同灰度的背景相邻，例如图片在该区域显示灰色天空时。

倒线解决不了

分离弹出区域和背景区域的一种方法是添加一条与相邻背景相反颜色的线。
但是，当背景和反色相同或相似时，这可能会在接近 50% 的灰色时失败。

我建议使用两条分隔线，一黑一白。试验哪一个应该在外面。双方可能会有所不同，从而产生“3D效果”。

示例问题

此图像显示了问题案例，其中 UI 弹出窗口外部是浅灰色的，背景类似于浅灰色：
弹出窗口很难看到，因为它与背景图像之间没有太大的对比 - 这就是我们想要解决的问题解决：

_{背景图片来源：Wikimedia Commons预览图片：Selçuk Turkey 2015 。}

（请注意，将背景和弹出窗口分开的很大一部分是边缘的方向：弹出窗口只有 x 和 y 边缘，照片背景几乎没有。）

双刃

在下图中，我只添加了一个 4px 宽的黑白边框。

在顶部和左侧，两个白色像素位于框架外部，两个黑色像素位于框架内部。颜色在右边缘和下边缘交换。

有了这个，在弹出的边界总是会有对比。
因为我们把它放在那里。

由 3D 边框分隔

选择白色和黑色线条的排列是为了符合我们视觉系统对左上角光线的浮雕边缘的期望。它会产生典型的“3D 外观”，这在这里很有用，因为它支持分离：

处理低和高对比度

分离适用于浅灰色 UI 和背景颜色，但请参阅下面的测试，使用较深的背景颜色提供更多对比度 - 没有太大区别，它的工作原理相同：

您可以做相反的事情并“照亮”某些部分，而不是通过使用图片的暗色调来创建对比。

1）您可以使用 2 种不同的灰色；一个由黑色制成，用于您的 UI 顶部，而背景可能是另一种灰色的单调。这样，您设计顶部的“灰色”将看起来像更深的灰色，下面的图像仍然是灰色的，但它们的 100% 密度将像“丰富的灰色”。您可以通过在 Photoshop 中使用“双色调”模式并使用灰色而不是黑色来做到这一点。

为什么它比使用灰度更好是因为使用灰度，您可以在图片背景上添加的阴影是有限的；如果你走得太低，你会失去很多细节来获得灰色。使用单调，您仍然可以将通常看到的所有细节保留为黑色，但它们将是灰色的！

2）结合上面的方法，你可以在你的图形下方添加一个透明的白框。我看到您提到您不想使用白框，但如果您为其添加透明度，它可能看起来非常柔和，并且可以将前景图形与背景图像平滑地融合在一起。

3）再次结合#1，你也可以使用白色的阴影而不是使用黑色来照亮边框。您也可以使用外发光效果。

PS：这些解决方案可以在 Photoshop 等软件中轻松使用，但您仍然可以将其中一些与 CSS 或发布软件一起使用。原理保持不变，如果您愿意，您可能需要重新调整背景图片。