使用CSS3拉伸背景图像以适合网页

168th Knowledge Seekers Workshop April 20, 2017 (六月 2025)

168th Knowledge Seekers Workshop April 20, 2017 (六月 2025)
Anonim

图像是有吸引力的网站设计的重要组成部分。这包括使用背景图像。这些是使用的图像和图形 背后 页面的区域与作为内容页面的一部分呈现的图像相对。这些背景图像可以增加页面的视觉兴趣，并帮助您实现您可能在页面上寻找的视觉设计。

如果您开始使用背景图像，毫无疑问，您将遇到希望图像拉伸以适合页面的场景。对于提供给各种设备和屏幕尺寸的响应式网站尤其如此。

这种拉伸背景图像的愿望是网页设计师非常普遍的愿望，因为不是每个图像都适合网站的空间。无论设置固定大小，拉伸图像都可以灵活地适应页面，无论浏览器窗口有多宽或多窄。

拉伸图像以适合页面背景的最佳方法是使用CSS3属性，用于background-size。下面是一个示例，它使用背景图像作为页面正文，并将大小设置为100％，以便它始终拉伸以适应屏幕。

身体 { background：url（bgimage.jpg）no-repeat; 背景大小：100％; }

根据caniuse.com，该属性适用于IE 9 +，Firefox 4 +，Opera 10.5 +，Safari 5 +，Chrome 10.5+以及所有主流移动浏览器。这涵盖了您现在可用的所有现代浏览器，这意味着您应该使用此属性，而不必担心它不会在某人的屏幕上工作。

伪造旧浏览器中的拉伸背景

您不太可能需要支持任何早于IE9的浏览器，但我们假设您担心IE8不支持此属性。在那种情况下，你可以假装拉伸背景。并且您可以使用Firefox 3.6的浏览器前缀（-moz-背景尺寸）和Opera 10.0（-o-背景尺寸).

伪造拉伸背景图像的最简单方法是在整个页面上拉伸它。然后你不会有额外的空间，或者不得不担心你的文字适合拉伸区域。这是怎么做的：

id =“bg”/>

  1. 首先，确保所有浏览器在和上都有100％的高度，0个边距和0个填充HTML 身体 元素。将以下内容放在HTML文档的头部：
  2. 添加您想要作为背景的图像作为网页的第一个元素，并给它 ID “bg”：
  3. 定位背景图像，使其固定在顶部和左侧，宽度为100％，高度为100％。将其添加到样式表中：
    1. img #bg {
    3. 位置：固定;
      4.
    5. 顶部：0;
      6.
    7. 左：0;
      8.
    9. 宽度：100％;
      10.
    11. 身高：100％;
      12.
    13. }
  4. 将所有内容添加到页面内 DIV 元素与 ID “内容”。添加 DIV 在图像下方：这里的所有内容 - 包括标题，段落等。
    1. 注意：现在查看您的页面很有意思。图像应显示延伸，但您的内容完全丢失。为什么？因为背景图像的高度为100％，内容分割为 后 文档流程中的图像 - 大多数浏览器都不会显示它。
  5. 定位您的内容，使其相对并具有 z-index的 这将使其高于标准兼容浏览器中的背景图像。将其添加到样式表中：
    1. #content {
    3. 位置：相对;
      4.
    5. z-index：1;
      6.
    7. }
  6. 但是你没有完成。 Internet Explorer 6不符合标准，但仍存在一些问题。除了IE6之外，有很多方法可以隐藏每个浏览器的CSS，但最简单的（最不可能导致其他问题）是使用条件注释。将样式表后面的以下内容放在文档的头部：
  7. 在突出显示的注释中，添加另一个样式表，其中包含一些样式以使IE 6更好玩：
  8. 一定要在IE 7和IE 8中进行测试。您可能还需要调整注释以支持它们。但是，当我测试它时它起作用了。

好的 - 这无疑是过度的。很少有网站需要支持IE 7或8，更不用说IE6了！因此，这种方法已经过时，对您来说可能是不必要的。我把它留在这里更多地作为一种好奇心的模型，在我们所有的浏览器在一起玩得非常好之前，它们有多么困难！

在较小的空间伪造拉伸的背景图像

您可以使用类似的技术来伪造拉伸的背景图像 DIV 或您网页上的其他元素。这有点棘手，因为您必须使用绝对定位或对页面的其他部分有奇怪的间距问题。

  1. 将图像放在我要用作背景的页面上。
  2. 在样式表中，设置图像的宽度和高度。请注意，您可以使用百分比表示宽度或高度，但我发现使用高度的长度值更容易调整。
    1. img #bg {
    3. 宽度：20em;
      4.
    5. 身高：30em;
      6.
    7. }
  3. 将您的内容放在div中 ID 我们上面所做的“内容”：你在这里的所有内容
  4. 将内容div设置为与背景图像相同的宽度和高度：
    1. div #content {
    3. 宽度：20em;
      4.
    5. 身高：30em;
      6.
    7. }
  5. 然后将内容定位到与图像相同的高度。因此，如果您的图像是30em，那么您将拥有顶级风格：-30em;不要忘记在内容上放置1的z-index。
    1. #content {
    3. 位置：相对;
      4.
    5. 上：-30em;
      6.
    7. z-index：1;
      8.
    9. 宽度：20em;
      10.
    11. 身高：30em;
      12.
    13. }
  6. 然后为IE 6用户添加-1的z-index，如上所述：

再次，背景大小享受它现在所拥有的广泛的浏览器支持，这种方法也很可能是不必要的，并作为过去时代的产品呈现。如果您确实想要使用此方法，请务必在尽可能多的浏览器中进行测试。如果您的内容更改了大小，则需要更改容器和背景图片的大小，否则，您最终会得到奇怪的结果。

编辑推荐