如何使背景圖片占據整頁
[英]how can I make the background image take the full page
問題描述
我有一個小型網絡應用程序，可以顯示您所在位置的天氣。 頁面的背景反映了天氣的描述，例如：多雲，下雨，風等。我有幾張圖像，但是沒有一張全屏顯示無需重復。 我知道如何將其設置為“無重復”。 但是，如果圖像分辨率不如桌面尺寸大，它將不足以填滿整個屏幕。 是否可以將背景圖像設置為填充/拉伸屏幕。 我根據天氣描述通過jquery / javascript設置背景圖像。 現場演示
這是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>
3 個解決方案
解決方案1
2 2017-06-29 23:02:59
首先，您需要使網頁填充可用的屏幕高度。 因此，將HTML元素的高度設置為100％。
html {
min-height:100%;
}
請注意，我使用了min-height樣式，因為如果您使用height ，並且頁面超出屏幕的高度（即，您獲得垂直滾動條），則html的長度將不匹配它-因此圖像將重復。
其次，您需要使頁面的主體與頁面的高度匹配。
body {
min-height:100%;
}
min-height與height 。
最后，使背景圖像覆蓋整個頁面。 因此，最終的CSS CSS應該包含兩種樣式：
body {
background-size: cover;
min-height:100%;
}
最后要注意的一點是，這僅適用於支持CSS3的瀏覽器-所有現代瀏覽器都支持，而較舊的瀏覽器則不支持。
解決方案2
0 2017-06-29 22:49:07
設置background-size以cover設置背景圖像的位置。
body {
background-size: cover;
}
根據您的背景圖像，這可能會使它顯得有些混濁/模糊。 因此，在文件大小和圖像質量之間取得平衡是明智的。
解決方案3
0 2017-06-29 22:49:18
您可以使用background-size: cover
盡管如此，如果這會使您的圖像比原始圖像大，它們將看起來丑陋且不專業。
如何使中心面板展開以占據extjs邊框布局中的全部可用空間？
[英]How can I make a center panel expand to take up full available space in an extjs border layout?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.