【问题标题】:How can I do my background image responsive我怎样才能使我的背景图像响应
【发布时间】:2016-04-05 01:38:16
【问题描述】:

我正在处理我的网页。我目前面临几个问题:

  • 图片不适应浏览器窗口的大小,如果我把浏览器窗口缩小,图片会显示为重复
  • 我想要,每张照片都占据整个显示屏
  • 如何使页脚和菜单在滚动期间保持可见?
  • 这是Codepen的链接
    #intro{
      background-image: url("http://www.tricentis.com/wp-content/uploads/2015/10/photo-1435575653489-b0873ec954e2.jpg");
      padding-top: 30px;
      background-size: cover; 
      height: 100vh;
      background-size: 100%;
    }
    

    提前感谢您的帮助

    【问题讨论】:

    • 您看到背景图像翻倍的原因是因为您设置了background-size: 100% 属性。这会覆盖您真正想要的 background-size: cover 属性。删除background-size: 100%,你应该很高兴。如果您希望页脚和页眉保持在固定位置,请尝试将它们设置为position: fixed
    • 提及您之前尝试过的内容是一个很好的做法。这个问题有点宽泛,有类似的问题,如thisthisthis

    标签: css webpage responsive


    【解决方案1】:

    如果您要将背景大小设置为100% 几行,那么将其设置为cover 没有任何好处。删除background-size:100%,它工作正常。

    【讨论】:

    • 谢谢。我做到了,但问题出在小显示器上,在这种情况下,我的图片之间有空白
    • 你可以尝试包含而不是覆盖。
    【解决方案2】:

    你可以设置

    background-repeat: no-repeat;
    

    确保每张图片不显示多次。

    【讨论】:

      猜你喜欢
      • 2021-02-20
      • 2021-11-25
      • 2017-08-12
      • 2021-04-14
      • 1970-01-01
      • 2019-08-05
      • 1970-01-01
      • 2017-09-02
      • 1970-01-01
      相关资源
      最近更新 更多