css - 图像大小调整如何与 css 一起使用？

Question

我已经使用 css 几年了，但从来没有尝试过使用固定宽度的布局。我正在考虑为我的下一个站点使用流畅的布局，或者尽可能多的百分比，但我有一个让我担心的问题。

如果我将一个宽度为 1900 像素的图像设置为背景，我知道当浏览器要求说 1600 像素时它只会缩小。

当分辨率要求 2000px 宽度时会发生什么？我会留下空白，对吗？如何避免这种情况？我觉得我可能应该扔掉它不是可以水平重复的图像。

Answer 1

通常使用的一个技巧是让图像用一种颜色“内发光”，然后也将背景颜色设置为相同。

假设您的图像没有平铺，并且具有黑色“内发光”或“羽毛”效果，那么您可以将容器的背景颜色设置为：

background-color: #000;
background-image: url(your_bgimage.jpg); /* image with black borders due to effect */
background-repeat: no-repeat;
background-position: center center;