如何編輯背景大小？

我從來沒有編碼過我的生活。我是一個完整的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>

來源

2017-07-25 j919315

一種方式來做到這一點是通過包裝一個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>

來源

2017-07-25 07:52:11 Zabusy

例如你想大小與1080px你的背景720像素只是在你的CSS補充一點：

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

}

來源

2017-07-25 07:52:33

首先，你的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>

來源

2017-07-25 07:53:14

爲了您的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>

來源

2017-07-25 07:58:50

謝謝！還有兩個noob問題：1.我如何確保整個事情仍然在頁面的中心？現在它在左邊。我試着玩「展示」，我可以讓文字居中，但整個背景延伸到整個頁面。 2.另外，是否有一種方法可以根據屏幕大小進行定時器縮放？它在桌面上看起來很好，但在移動設備上查看時，文本變得混亂起來。 – j919315

@ j919315我已經編輯上面的帖子。看看它，並檢查它是否工作正常。 –

@ j919315這是在行嗎？ –

如何編輯背景大小？

回答

相關問題