【问题标题】:How to make a background image responsive and show on mobile devices如何使背景图像响应并在移动设备上显示
【发布时间】:2015-06-23 02:55:24
【问题描述】:

我已经设法让背景图片显示在桌面设备上并做出响应,但是当我在移动设备上查看该网站时,背景图片不显示。

这是我到目前为止的代码:

#intro{ 
background: url(../img/trees.png) no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/trees.png', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/trees.png', sizingMethod='scale')";
min-height: 100%;
}

【问题讨论】:

  • 小提琴或者它没有发生
  • 检查您的媒体查询..可能是在移动版本中,它出于响应原因被隐藏..或显示小提琴。

标签: html css mobile web


【解决方案1】:
body{
  width: 100%;
  height: 100%;
  margin: 0px;
  background: url(../image/background.jpg) no-repeat fixed top center;
  background-size: cover;
}

【讨论】:

  • 那么你想在哪里应用这个??
  • #intro { background: url(../img/trees.png) no-repeat fixed center;
  • 感谢您的回复,我已将其合并,并且在我更改桌面上窗口的大小时背景会调整大小,这很好。但是,如果您在移动设备上查看该网站,您会发现背景图片高度没有充分变化
【解决方案2】:

使用#intro{ background-size:100% 100%;}

【讨论】:

    【解决方案3】:

    把这个插入你的脑袋:

    <meta name="viewport" content="width=device-width, initial-scale=1">
    

    background-size to 100vh 更改为高度,将100vw 更改为宽度

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2014-06-28
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2014-10-17
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多