CSS - 将图像边缘与背景图像混合

Question

所以我开发了一个基本的网站并使用了一些带有炫酷灯光效果的图像，但是颜色的变化击中了页面的边缘，这是图像：

因为你可以看到图像中的光到达边缘所以我想知道的是，有没有办法在css或html中混合边缘，所以它们看起来很好而不是那样？我看了整个网络，找不到任何与我的问题有关的内容......

提前致谢！

Answer 1

有很多方法可以实现这一点，但唯一好的方法是在制作图像时注意你的边缘。清晰简单。如果您的页面有黑色背景，请确保您具有相同颜色的图像背景。然后淡化你的光效＆＃34;在使用您最喜欢的图像处理程序撞到边缘之前，使用相同的颜色。

我建议不要制作具有透明背景的图像 - 您的图像很大，性能会略微下降。

如果您真的想尝试淡化后期制作，可以使用CSS渐变来使图像看起来在边缘淡出。或者使用（供应商特定的）CSS3玩具，例如box-shadow（参见Box shadow on MDN）来产生插入的黑色阴影。

请记住，所有这些技巧，特别是在您展示的巨大图像上，都会降低浏览器性能（以及用户体验）的成本，并且不受广泛支持（特别是旧版浏览器）。此外，许多移动设备都不会感谢您的效果显示。