Wie bearbeite ich die Hintergrundgröße?

Ich habe nie in meinem Leben codiert. Ich bin ein kompletter Noob. Ich habe diesen HTML-Code, es ist ein Countdown-Timer.Wie bearbeite ich die Hintergrundgröße?

Ich wollte die Hintergrundfarbe ändern, was ich tat. Was ich nicht tun kann, ist die Größe des Hintergrunds zu ändern, so dass es gut um den Text passt, anstatt die ganze Seite aufzunehmen. Wie kann ich das tun?

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

Quelle

2017-07-25 j919315

Eine Möglichkeit, es zu tun ist durch eine div um Ihre p

Einwickeln

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

 
p { 
 
    margin: 0; 
 
    color: white; 
 
}

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

Oder auch einfach Ihre p eine Hintergrundfarbe zu geben. Wie folgt aus:

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

<p> 
 
Hello world 
 
</p>

Quelle

2017-07-25 07:52:11 Zabusy

Zum Beispiel Sie Größe wünschen Ihren Hintergrund mit 1080px von 720px nur fügen Sie diese in Ihrem CSS:

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

}

Quelle

2017-07-25 07:52:33

Zuerst hat Ihr CSS einen Fehler, weil Sie die Klammer nicht nach dem Körper schließen. Wenn Sie den Hintergrund auf Ihren Text anwenden möchten, geben Sie einfach die <p> Tag die Hintergrundfarbe:

Edit: Ich habe Ihre Schriftgröße ein wenig geändert, da dies wirklich riesig war. bis 15 stellen Sie es einfach zurück, wenn

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

Quelle

2017-07-25 07:53:14

Für Ihre Q1 Wunsch. Ich habe es in der Mitte gemacht, indem ich ein Elternteil Div. Für Ihr Q2. Ich habe eine Medienabfrage geschrieben. Wenn das Gerät mobil ist, wird es die Schriftart 1em verwenden.

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

Quelle

2017-07-25 07:58:50

Dank! Zwei weitere noob-Fragen: 1. Wie stelle ich sicher, dass das Ganze in der Mitte der Seite bleibt? Gerade jetzt ist es auf der linken Seite. Ich habe versucht, mit "display" zu spielen, und ich kann den Text zentrieren, aber der gesamte Hintergrund erstreckt sich auf die gesamte Seite. 2. Gibt es eine Möglichkeit, den Timer abhängig von der Bildschirmgröße zu skalieren? Es sieht auf einem Desktop gut aus, aber wenn es auf einem mobilen Gerät angezeigt wird, wird der Text durcheinander gebracht. – j919315

@ j919315 Ich habe obigen Beitrag bearbeitet. Schauen Sie hinein und prüfen Sie, ob es funktioniert. –

@ j919315 Funktioniert das? –

Wie bearbeite ich die Hintergrundgröße?

Antwort

Verwandte Themen