html - css - 背景太宽

Question

我的 CSS 网站的小问题。我正在将我的 PS 设计转换为 html5 和 css3 网站，看起来我的页面顶部和底部的背景图像太大（1600 像素）。如果我想保持整个网站的外观和感觉，我应该怎么做？

score 1 · Accepted Answer

你让你的CSS如下

body, elementID, elementClass{
    margin: 0px;
    width: 100%;
}

无论用户的屏幕分辨率如何，您的页面或 div 或容器都将适合屏幕。

score 0 · Accepted Answer

如果您的问题更清楚一点，那就太好了，但这里是：

网站的浏览方式很大程度上取决于访问者使用的屏幕分辨率。例如，用户 A 的分辨率可能为 1920 x 1080。这意味着他们可以轻松查看您的所有网站。而另一个用户可能只有 1024 x 768，这显然不足以看到所有 1600 像素！

要解决这个问题，很大程度上取决于您网站的设计，背景是可以重复的（例如渐变），还是有点棘手，例如天际线？

如果很简单，您可以使用 CSS 水平、垂直或同时重复背景。

您还可以使用 CSS 定位背景（例如顶部居中），这将使您的背景居中，切断越过屏幕两侧的边缘，同时保持中间部分可见。

在 CSS3 中，您还可以获得一个名为“background-size”的属性，它允许您定义背景的反应方式。这可以有几个值，它们是：

封面- 这确保整个图像适合它的容器（以便整个图像可见）。
包含- 这使图像适合整个容器，因此它的某些部分可能不可见。
dimensionx dimensiony - 如果您指定一个值/百分比，第一个值/百分比将是宽度，第二个值/百分比是高度。如果只提供一个，它用于宽度和高度设置为自动。

请注意，并非所有浏览器都支持背景大小。

2 回答 2