Question

我一直在研究如何让我的背景图像在不同的屏幕分辨率下工作。经过多次尝试失败后，我注意到我甚至无法获得正常的CSS背景。这不是文件，我尝试过不同的格式。不同屏幕分辨率的代码：

html { 
  background: url('background.jpg') no-repeat center center fixed; 
  -webkit-background-size: contain;
  -moz-background-size: contain;
  -o-background-size: contain;
  background-size: contain;
}

代码正常背景：

body {
    background-image: url('Background.jpg');
}

Answer 1

这很奇怪。您是否检查过图像的路径是否正确？例如，如果图像位于“example”文件夹中，则路径应为“example / myImage.png”。

至于响应背景，我相信你走在正确的轨道上，虽然一个简单的$testTime = strtotime("2016-03-03 12:30:45 am"); $final = DATE("Y-m-d H:i",$testTime);//1970-01-01 01:00已经足够了。检查这个Jsfiddle https://jsfiddle.net/a0mvnj63/

同样尝试使用外部图像，就像我的例子一样，以防万一。

Answer 2

尝试使用background-image:url('../background.jpg');与height: 100vh;

这样的代码

body {
  padding: 0;
  margin: 0;
  height: 100vh;
  background-image: url(http://static.tumblr.com/295a1562899724d920b2b65ba33ffb76/vouqyzj/f2Dna5qb8/tumblr_static_197ahk99f1z44ogskg4gw4c80.jpg);
  background-size: 100% 100%;
  background-position: center;
}
h1 {
  text-align: center;
  color: #fff;
}

<body>

  <h1>Hello Universe</h1> 

</body>

Answer 3

只有背景元素不会给任何div或html赋予高度和宽度。

尝试为代码提供一些高度和宽度。就像

html { background: url('background.jpg') no-repeat center center fixed; height:500px; width:500px; }

或者只是在身体上放置一些数据，这样你就可以根据包含得到自动高度宽度并在后台获取图像。

背景图像根本不工作

3 个答案: