Question

我从未在我的生活中编码过。我是一个完整的菜鸟。我有这个HTML代码，它是一个倒数计时器。

我想改变背景颜色，我做了。我不知道该怎么做是改变背景的大小，使其适合文本，而不是占用整个页面。我怎么能这样做？

<!DOCTYPE HTML>
<html>
<head>
<style>
body {
    background-color: #ffd;
p {
  text-align: center;
  font-size: 15em;
}
</style>
</head>
<body>

<p id="demo"></p>

<script>
// Set the date we're counting down to
var countDownDate = new Date("Aug 17, 2017 00:00:00").getTime();

// Update the count down every 1 second
var x = setInterval(function() {

    // Get todays date and time
    var now = new Date().getTime();

    // Find the distance between now an the count down date
    var distance = countDownDate - now;

    // Time calculations for days, hours, minutes and seconds
    var days = Math.floor(distance / (1000 * 60 * 60 * 24));
    var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 

60));
    var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    var seconds = Math.floor((distance % (1000 * 60)) / 1000);

    // Output the result in an element with id="demo"
    document.getElementById("demo").innerHTML = days + ": " + hours + ": "
    + minutes + ": " + seconds + " ";

    // If the count down is over, write some text 
    if (distance < 0) {
        clearInterval(x);
        document.getElementById("demo").innerHTML = "END";
    }
}, 1000);
</script>

</body>
</html>

Answer 1

一种方法是在div

周围包裹p

＆＃13;

.background {
  background-color: gray;
  display: inline-block;
}

p {
  margin: 0;
  color: white;
}

＆＃13;

<div class="background">
<p>
Hello world
</p>
</div>

＆＃13;

甚至只是给你的p背景色。像这样：

＆＃13;

p {
  display: inline-block;
  margin: 0;
  color: white;
  background-color: gray;
}

＆＃13;

<p>
Hello world
</p>

＆＃13;

Answer 2

例如，您希望使用1080px×720px调整背景大小，只需在css中添加：

body{
  background-size: 1080px 720px;
}

}

Answer 3

首先，你的CSS有一个错误，因为你没有在正文后关闭括号。如果要将背景应用于文本，只需为<p>标记提供背景颜色：

编辑：我改变了你的字体大小，因为这真的很大。如果需要，只需将其设置为15

// Set the date we're counting down to
var countDownDate = new Date("Aug 17, 2017 00:00:00").getTime();

// Update the count down every 1 second
var x = setInterval(function() {

    // Get todays date and time
    var now = new Date().getTime();

    // Find the distance between now an the count down date
    var distance = countDownDate - now;

    // Time calculations for days, hours, minutes and seconds
    var days = Math.floor(distance / (1000 * 60 * 60 * 24));
    var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    var seconds = Math.floor((distance % (1000 * 60)) / 1000);

    // Output the result in an element with id="demo"
    document.getElementById("demo").innerHTML = days + ": " + hours + ": " + minutes + ": " + seconds + " ";

    // If the count down is over, write some text 
    if (distance < 0) {
        clearInterval(x);
        document.getElementById("demo").innerHTML = "END";
    }
}, 1000);

body {
  /* Empty body style, but with closed bracket! */
}

p {
  background-color: #ffd;
  text-align: center;
  font-size: 5em;
}

<p id="demo"></p>

Answer 4

为你的Q1。我把它放在一个父母div的中心。为你的Q2。我写过媒体查询。因此，如果设备是移动的，它将使用字体作为1em。

＆＃13;

<!DOCTYPE HTML>
<html>

<head>
  <style>
    .parent-div {
      text-align: center;
    }
    
    #demo {
      font-size: 2em;
      background: orange;
      display: inline-block;
    }
    
    @media only screen and (max-width: 767px) {
      #demo {
        font-size: 1em;
      }
    }
  </style>
</head>

<body>
  <div class="parent-div">
    <p id="demo"></p>
  </div>

  <script>

    // Set the date we're counting down to
    var countDownDate = new Date("Aug 17, 2017 00:00:00").getTime();

    // Update the count down every 1 second
    var x = setInterval(function() {

      // Get todays date and time
      var now = new Date().getTime();

      // Find the distance between now an the count down date
      var distance = countDownDate - now;

      // Time calculations for days, hours, minutes and seconds
      var days = Math.floor(distance / (1000 * 60 * 60 * 24));
      var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 *

        60));
      var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
      var seconds = Math.floor((distance % (1000 * 60)) / 1000);

      // Output the result in an element with id="demo"
      document.getElementById("demo").innerHTML = days + ": " + hours + ": " +
        minutes + ": " + seconds + " ";

      // If the count down is over, write some text 
      if (distance < 0) {
        clearInterval(x);
        document.getElementById("demo").innerHTML = "END";
      }
    }, 1000);
  </script>

</body>

</html>

＆＃13;

如何编辑背景大小？

4 个答案: