如何编辑背景大小？

问题描述：

我从来没有编码过我的生活。我是一个完整的noob。我有这个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>

答

一种方式来做到这一点是通过包装一个div在你p

.background { 
 
    background-color: gray; 
 
    display: inline-block; 
 
} 
 

 
p { 
 
    margin: 0; 
 
    color: white; 
 
}

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

甚至干脆给你p的背景颜色。就像这样：

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

<p> 
 
Hello world 
 
</p>

答

例如你想大小与1080px你的背景720像素只是在你的CSS补充一点：

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

}

答

首先，你的CSS有一个错误，因为你没有关闭正文后的括号。如果你想将背景应用到你的文本，只需给<p>标签背景颜色：

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

// 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>

答

为了您的Q1将其设置回15。我以父母一方为中心做了这件事。适合你的Q2。我写了媒体查询。所以如果设备是移动的，它将使用字体为1em。

<!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>

谢谢！还有两个noob问题：1.我如何确保整个事情仍然在页面的中心？现在它在左边。我试着玩“展示”，我可以让文字居中，但整个背景延伸到整个页面。 2.另外，是否有一种方法可以根据屏幕大小进行定时器缩放？它在桌面上看起来很好，但在移动设备上查看时，文本变得混乱起来。 – j919315

@ j919315我已经编辑上面的帖子。看看它，并检查它是否工作正常。 –

@ j919315这是在行吗？ –

如何编辑背景大小？

相关推荐