Question

我创建了一个网页，其页面背景根据小时而变化。我希望背景图像始终是页面的整个宽度，所以我试图将其设置为100％，但它似乎并没有起作用。代码的某些部分是否写得不正确？我需要实现别的吗？

＆＃13;

body {
  margin-left: 5%;
  margin-right: 5%;
}
#demo {
  color: white;
}
#txt {
  color: white;
  float: left;
  font-family: OpenSans;
  font-size: 90px;
  margin: 20px;
}
#weather {
  color: white;
  float: right;
  font-family: OpenSans;
  font-size: 40px;
  margin: 20px;
}

＆＃13;

<!DOCTYPE html>
<html>
  <head>
    <title>Blooming Time And Temperature</title>
    <link href="css/format.css" rel="stylesheet"/>
    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
    <script>
          function startTime() {
        document.getElementById('txt').innerHTML =
          moment().format("hh:mm A");
        var t = setTimeout(startTime, 1000);
        var hour = moment().hour()
      }
    </script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
    <script>
            $(document).ready(function() {

              function changeBackground(){
              var hour = new Date().getHours();
              if(hour > 7 && hour <= 12)
              {
                 // It's morning
                 $('body').css('background', 'url(sequence/1.jpg) no-repeat').width('100%');
              }
              else if(hour > 12 && hour < 18)
              {
                 // It's noon
                 $('body').css('background', 'url(sequence/2.jpg) no-repeat').width('100%');
              }
              else if(hour > 19 && hour < 21)
              {
                 // It's noon
                 $('body').css('background', 'url(sequence/3.jpg) no-repeat').width('100%');
              }
              else
              {
                  // It's night
                  $('body').css('background', 'url(sequence/4.jpg) no-repeat').width('100%');
              }
          }
   changeBackground(); // invoke for the first time manually
   setInterval(changeBackground, 1000 * 60 * 60);

        });
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.simpleWeather/3.1.0/jquery.simpleWeather.min.js"></script>
    <script>
      $(document).ready(function() {
        $.simpleWeather({
          location: 'Brooklyn, NY',
          woeid: '',
          unit: 'f',
          success: function(weather) {
            html = '<p>'+weather.temp+'&deg;'+weather.units.temp+'</p>';
            html += '<div id="city">'+weather.city+', '+weather.region+'</div>';

            $("#weather").html(html);
          },
          error: function(error) {
            $("#weather").html('<p>'+error+'</p>');
          }
        });
      });
    </script>
  </head>
  <body onload="startTime()"">
    <div id="txt"></div>
    <div id="weather"></div>
  </body>
</html>

＆＃13;

Answer 1

您可以尝试删除CSS中body标签的margin属性，并在body标签上设置background-size: cover。然后在你的changeBackground函数中，你可能不需要.width(100%);方法，因为交换背景图像时宽度不应该改变？

Answer 2

如果您将背景图片放在public interface UserRepository extends JpaRepository<User, String> {上并且您拥有此css属性，则不会这样做。

console.log

制作属性

componentDidMount

背景宽度jQuery规范不起作用

2 个答案: