Question

刚刚完成我的FCC挑战天气预报页面。我不喜欢交换我的bg的代码如何工作。感觉不对，但对于我的生活，我无法解决如何解决它。与此同时，这意味着我无法找到一种让bg淡入而不是轻弹的好方法。有什么想法吗？

https://codepen.io/EpicTriffid/pen/xrjxVE

＆＃13;

#spacer { 
  margin:0;
  padding:0;
  height:50px; 
}
body {
  min-height: 100%;
  min-width: 1024px;
  width: 100%;
  height: auto;  
  position: fixed;
  top: 0;
  left: 0;
  background-color:black;
  background-image:
}
.text {
  color:white;
  font-family:"raleway";    
}
#myweather {
  margin-left:30px;
  margin-top:30px;
  font-size:5em;
}
#header {
  float:left;
  margin-left:20px;
}
#location {
  font-style: italic;
  color:white;
  margin-left:-200px;
  display:none;
}
#skycon {
  padding:30px;
  display:none;
}
#result {
  position:relative;
  padding-top:20px;
  padding-left:60px;
  display:none;
}
#temp {
  padding-left:60px;
  font-size:150px;
  display:none;  
}
#corf {
  color:white;
  font-weight:bold;
  display:none;
  margin-left:-45px;
  margin-top:-30px;
}
#degreeswitch {
  font-family:"raleway";
}
#degreecon {
  margin-top:2%; 
  margin-left:-2%;  
}
#mark {
  text-align: center;
  font-family:"raleway";
  font-size: 20px; 
  position: fixed;
  bottom: 0;
  width:100%;
  color: white;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--Fonts-->

<head>
  <link href="https://fonts.googleapis.com/css?family=Josefin+Slab" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Crimson+Text" rel="stylesheet">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/climacons-fork/1.0.0/climacons.min.css" rel="stylesheet">
</head>

<!--Background-->

<!--Skycons-->

<script src="https://rawgithub.com/darkskyapp/skycons/master/skycons.js"></script>

<!--Header-->
<h1 id="myweather" class="text">myWeather.</h1>

<!-- location -->
<div id="header" class="container-fluid">
  <h4 class="text">Weather for :</h4>
</div>
<div class="container">
  <h4 id="location" class="text"></h4>
</div>
<div class="container-fluid">
  <div class="row">
    <div class="col-xs-2">
      <canvas id="skycon" width="300" height="300">
          </canvas>
    </div>
    <div class="col-xs-10">
      <h2 class="text" id="result"></h2>
    </div>
    <div class="col-xs-2">
      <h1 class="text" id="temp"></h1>
    </div>
    <div id="degreecon" class="col-xs-2">
      <svg id="corf">
        <text id="degreeswitch" x="31" y="67" fill="white" font-size="50px">&degf</text>
        <circle cx="50" cy="50" r="30" stroke="white" stroke-width="3" fill="transparent"/>        
      </svg>
    </div>
  </div>
</div>
<div id="mark">By<a href="https://codepen.io/EpicTriffid/full/MJzMgK/" target="_blank"> Epic Triffid </a>and powered by<a href="https://darksky.net/forecast/" target="_blank"> Darksky </a>and<a href="" target="_blank"> GeoIP</a></div>

＆＃13;

{{1}}

＆＃13;

抱歉，我似乎无法获得工作链接：/

Answer 1

我已经为你解决了。以下是更新的CodePen：https://codepen.io/anon/pen/jwvELj

基本上，我创建了一个新元素<div id="background"></div>，并将其修复为全屏。我将其z-index设置为0并将其余内容包含在<div id="wrapper"></div>中，并将z-index设置为1.我已更改了if语句，而不是直接修改{ {1}}标记带有<body>的CSS，我现在将变量设置为图像的网址。

现在是魔法发生的时候。这是片段

background-image

我们在JS中创建了一个var bg = new Image(); bg.onload = function(){ $('#background').css({'background-image': 'url('+imgUrl+')'}); $('#background').addClass('visible'); } bg.src = imgUrl;的新对象，并定义了一个在加载图像时要运行的函数。该函数设置Image的背景图像，并为其添加一个类#background。我默认情况下使背景不可见，并将类visible设置为visible。具有opacity: 1;过渡的这种过渡可以实现良好的淡入效果。希望这是你正在寻找的。

试图优化我的背景变化，并尝试让它们淡入

1 个答案: