Question

我将页面划分为不同的部分，如页眉，页脚和正文。现在我需要在页眉和页脚的背景上设置图像。我应该选择一个更大的图像，可以根据用户的系统尺寸重新调整大小，还是应该保持它的大小不变？

如何使用已经确定的部分保留图像？

Answer 1

我会为较小的设备创建单独的图像，因为较小的文件大小在平板电脑或移动设备上加载时会有所帮助。使用媒体查询加载不同的图像

 header-bg-desktop.jpg
 header-bg-tablet.jpg
 header-bg-mobile.jpg

Answer 2

我同意使用单独的图像有助于提高性能（特别是在手机上），但如果您只想使用CSS，则可以使用 background-size: cover ，这将确保背景图像不会拉伸，但也会填充整个父容器。

E.G。 http://jsfiddle.net/YNBw9/

Answer 3

您希望使用background-size: cover来获取图像以填充不同大小的容器。如果可能，您还希望使用媒体查询将正确大小的图像传送到正确的屏幕。也就是说，您不希望超出需要更多像素的小屏幕（不是屏幕，带宽和加载时间），并且您不希望为更大的屏幕扩展蹩脚的图像。

http://plnkr.co/edit/bMryzPTGzUK6Y5BbDpWh?p=preview显示了一个示例。调整右侧窗格的大小。

有关媒体查询的更多信息：
https://www.google.com/search?q=media+queries

有关背景尺寸的更多信息：
https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
http://css-tricks.com/perfect-full-page-background-image/

Answer 4

这在很大程度上取决于您网站的目标受众。

如果您要将所有三个用户群定位到移动设备，平板电脑和桌面设备，那么您必须通过CSS为所有用户提供具有不同背景图片代码的图像。

这是一个很好的参考，让你开始，

http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

如果您只定位桌面用户，那么您需要提供一个背景图片大小，这应该足够了。

示例代码，

<style type="text/css">
body {
    background-image:url('<%=request.getContextPath()%>/images/logo.jpg');
    background-position: left top;
    background-repeat: no-repeat;
}
</style>

如何在CSS中调整图像大小？

4 个答案: