Question

以下是我要找的内容：http://tinyurl.com/oe3ydvr。无论窗口的大小如何，html都会调整以适应并且看起来很完美。我已经检查了css代码，但我仍然无法弄明白。我读了以下的地方：

  <style>
  background: url(images/bg.jpg) no-repeat center center fixed; 
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
  background-size: cover;
  </style>

我所尝试的一切都不尽如人意。我真的很感激关于这个问题的一些关闭，谢谢jmr333：）

Answer 1

好吧，这里有很多事情，主滑块容器slider1_container正在调整为适合视口的像素大小，其中包含javascript（内置img标签）。文本块不是文本，而是图像和缩放方式 - 从许多角度来看这是一种非常糟糕的做法。您的代码与背景图像如何以良好的方式扩展＆＃34;＆＃34;调整视口大小时

Answer 2

您不能像示例代码中所示那样设置网站背景的样式，而是直接在脚本代码的基础级别上添加属性。您始终必须设置特定html元素的样式，即div或body或html，并在该上下文中指定属性：

body {
    background: url(images/bg.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

有关背景属性的示例，请参阅w3schools。

在上述网站中，实际上有一些复杂的javascript用于设置顶部横幅（#slider1_container）宽度的样式。这很容易识别，因为它可以动态调整内联css属性，同时更改浏览器窗口的宽度......

作为一个更简单的开始，请以max-width: 100%作为shown here开始。

我猜，很可能你会想要从特定的100％-width-div（以及顶部的某些元素）开始，而不是整个页面背景。（这些基础知识不需要javaScript）

图像/内容调整为页面重新调整大小，始终保持结构

2 个答案: