主页 / 问题 / 1079287
Accepted
slobodianiukvitali
Asked:2020-02-07 01:18:05 +0000 UTC2020-02-07 01:18:05 +0000 UTC

响应式背景图片？

  • 772

如何为网站写出这样的背景（自适应）

https://www.webfx.com/blog/images/assets/cdn.sixrevisions.com/0431-01_responsive_background_image_demo/responsive-full-background-image-demo.html

css

1 个回答

  1. Best Answer

    具体来自示例 - 如下所示：

    css

    body {
    background-image: url(https://www.webfx.com/blog/images/assets/cdn.sixrevisions.com/images/background-photo.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background-color: #464646;
}

    而在移动版本中，只需加载一个较小的图像：

    @media only screen and (max-width: 767px){
  body {
      background-image: url(images/background-photo-mobile-devices.jpg);
  }
}

    这里有详细的教程，点击示例中的“教程”按钮即可阅读。

    https://www.webfx.com/blog/web-design/responsive-background-image/

    • 0

相关问题