Question

我有一个小型网络应用程序，可显示您所在位置的天气。并且页面的背景反映了天气描述，例如：阴天，下雨，风等。我有几张图片，但没有一张在不重复的情况下拍摄全屏。我知道如何将其设置为不重复;但是，如果图像分辨率没有桌面尺寸那么大，则无法填满屏幕。是否可以将背景图像设置为填充/拉伸屏幕。我根据天气描述通过jquery / javascript设置背景图像。 live demo

以下是CodePen

上的代码

$(document).ready(function() {  
    $.getJSON('https://ipinfo.io', function(data){
  console.log(data);
    $(".city").html(data.city +", " + data.region);
    $(".ip-address").html(data.ip);
    $(".geo-location").html(data.loc);
    var loc = data.loc.split(","); 
      
    var city = data.city;
    var region = data.region;
    var country = data.country;
      
    $("#loc").html(city+", "+region+". "+country);
      
          var url = "https://cors-anywhere.herokuapp.com/http://api.openweathermap.org/data/2.5/weather?lat="+loc[0]+"&lon="+loc[1]+"&appid=8e1880f460a20463565be25bc573bdc6";
      
    $.getJSON(url, function(json) {
// temperature is provided in kelvins conver to F or C
       console.log(json); 
      var temp = Math.round(1.8 * (json.main.temp - 273) + 32);
      var desc = json.weather[0].description;
      var hum = json.main.humidity; 
      var wind = json.wind.speed;
      
      $("#desc").html(desc);
      $("#temp").html("Temperature "+temp+"F");
      $("#hum").html("Humidity : "+hum+" %");
      $("#wind").html("Wind: "+wind+"knots");      
      
//calculating time to display img depending wheather is day or night
      var date = new Date();
      var today = date.getDate();
      var month = date.getMonth();
      var year = date.getFullYear();      
      $("#date").html(today+"/"+month+"/"+year);
      
   var images = {
     "clear sky": "http://pctechtips.org/weather/img/clear.jpg",

	"blue sky": "http://pctechtips.org/weather/img/clearsky.jpg",

	"stars": "http://pctechtips.org/weather/img/stars.jpg",

	"snow": "http://pctechtips.org/weather/img/snow.jpg",

	"rain": "http://pctechtips.org/weather/img/rain.jpg",

	"scattered clouds": "http://pctechtips.org/weather/img/clouds.jpg",
    
  "thunderstorm":
     "http://pctechtips.org/weather/img/thunderstorm.jpg"     
   };
   console.log((desc === "scattered clouds"));
  var background = " ";      
      switch(desc) {
        case "clear sky":
          background = images["clear sky"];
          break;
        case "snow":
          background = images.snow;
          break;
        case "blue sky":
          background = images["blue sky"];
          break;
        case "rain":
          background = images["rain"];
          break;
        case "cloud":
          background = images["cloud"];
          break;
        case "thunderstorm":
          background = images["thunderstorm"];
          break;
        case "scattered clouds":
          background = images["scattered clouds"];
          break;
        default:
          background = images["stars"];        
      }
     
// setting background depending on weather description
   $('body').css('background-image', 'url(' + background + ')');
      
 });
});  
});

body {
  color: white;
  background-image: url("http://pctechtips.org/weather/img/clearsky.jpg"); 
/*font-family: 'Michroma'; */ 
  
}

#bg {
  position: fixed; 
  top: 0; 
  left: 0; 
	
  /* Preserve aspet ratio */
  min-width: 100%;
  min-height: 100%;
}
.container {
  margin-top: 50px;
}

#loc {
  margin-top: 80px;
}

/* setting up the transparent divs */
.transparent {
  background-color: white;
  color: black;
  opacity: 0.5;
  padding:10px;
  border-width: 1px;
  border-style: solid;
}

.test {
  border-style: solid
}

.center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

h1 {
  font-size: 50px;
}

h2 {
  font-size: 30px;
}

p {
  font-size: 14px;
}

#data {
  color: black;
  font-size: 18px;
}

#icon {
  margin-top: 
}

<html>

<head>
<link href='https://fonts.googleapis.com/css?family=Michroma' rel='stylesheet'>
</head>
<body>
<div class="container">   
  <h1 id="header-text" class="text-center">ZeroDegree</h1>
  <h2 class="text-center">Local Weather Application</h2>       
  <div class="text-center "><h5 id="loc"></h5></div>
    <div id="date" class="text-center"></div> 
  <div id="icon" class="text-center"><i class="wi wi-day-lighting"></i></div>
  <div class="text-center"><h4 id="desc">Clear Sky</h4></div>
  
  <div id="data" class="row center">
      <div id="temp" class="col-lg-2 offset-lg-3 col-md-2 offset-md-3 col-12 transparent text-center box ">Temperature 89F
      </div>
    <div id="hum" class="col-lg-2 col-md-2 col-12 transparent box ">Humidity 60%
        </div>
    <div id="wind" class="col-lg-2 col-md-2 col-12 transparent box">Wind 3.5Knots   
      </div>
  </div>     
</div>
</body>
</html>

Answer 1

首先，您需要使网页填满可用的屏幕高度。因此，将HTML元素高度设置为100％。

html {
    min-height:100%;
}

注意，我使用了min-height样式，因为如果你使用height并且页面增长超出屏幕高度（即你得到一个垂直滚动条），那么html长度将不会增长匹配它 - 所以图像会重复。

其次，您需要使页面的主体与页面的高度相匹配。

body {
    min-height:100%;
}

min-height与height同样重要。

最后，让背景图片覆盖整个页面。所以身体的最终css应该包括两种风格：

body {
    background-size: cover;
    min-height:100%;
}

最后要注意的是，这只适用于支持CSS3的浏览器 - 所有现代浏览器都支持这种浏览器，但旧版浏览器不支持。

Answer 2

将background-size设置为您设置背景图片的cover。

body {
    background-size: cover;
}

根据您的背景图像，这可能会使其显得有点混浊/模糊。因此，在文件大小和图像质量之间取得平衡是明智的，以获得最佳效果。

Answer 3

您可以使用background-size: cover

但是，如果这会使你的图像比原来的图像更大，那么它们看起来会很丑陋而且不专业......

如何让背景图片占据整页

3 个答案: