javascript - 如何制作一个捕捉到浏览器每一侧的捕捉标题？

Question

因此，在处理我的常见问题解答页面时，我想我会尝试创建一个时尚的标题。现在的问题是，我拥有它，但我不知道如何将它吸附到浏览器的两侧(如果这可能的话)。

我想知道 CSS 或 JavaScript 是否有助于拍摄此图像:( http://files.enjin.com/503205/FAQWelcome.png ) 并将其设置为 50-75% 的高度(取决于它的外观)并将其对齐到网络浏览器，以便Web 浏览器越小，图像就越小，因此它在任何浏览器中都保持相同的外观。

我还想知道是否有可能让一大堆纯 HTML 文本遵循相同的展开和折叠模式？

我对 CSS 还很陌生，但我对如何让它发挥作用有中等的了解。我希望能够创建一个干净、流畅且访问愉快的网站。

编辑:我正在为此使用模块放置，因为 Enjin 不支持编辑整个网站的 CSS，而是支持 HTML 模块。

Answer 1

这是一个 Fiddle在这个例子中图像被设置为 body 背景

body {
  background: #f8f8f8 url(http://files.enjin.com/503205/FAQWelcome.png) top center no-repeat;
}
@media all and (max-width:960px) {

  body {
   background: #f8f8f8 url(http://files.enjin.com/503205/FAQWelcome.png) top center no-repeat;
   background-size: auto 300px;
  } 

}

@media all and (max-width:600px) {

  body {
   background: #f8f8f8 url(http://files.enjin.com/503205/FAQWelcome.png) top center no-repeat;
   background-size: auto 200px;
  } 

}

要获得响应能力，您必须使用 CSS 媒体查询，媒体查询以屏幕尺寸为目标，并根据屏幕尺寸设置适当的 CSS 属性。