[英]Responsive Countdown aligning to background image
我想尋求有關如何使我的倒數計時器響應的幫助。 每次縮放窗口大小時,它仍將在筆記本背景圖像中居中對齊的位置。 我還不熟悉媒體查詢。 另外,由於紙張設計嵌入在背景圖像中,因此我很難將兩者對齊。
(在編輯中添加了此內容)我也忘記詢問和提及。 在這段代碼中,它幾乎可以正常工作。 我只需要提及我在CSS上聲明了其他p {}。 因此,我也想問一下我如何才能專門針對.bg p {}? 因為看起來,css中的前一個p {}也影響了正在執行的倒計時
這是代碼html
<div class="bg">
<p id="countdown"> </p>
</div>
的CSS
.bg {
background-image: url('http://thefeministmegaphone.com/wp-content/uploads/2016/12/893146-notebook-wallpaper.jpg');
background-size: 100%;
background-repeat: no-repeat;
position:fixed;
width:100%;
height:100%;
left:0;
top:0;
text-align:center;
}
p#countdown {
transform: rotate(-5deg);
display:block;
color: #333;
font-size: 65px;
font-family:times;
margin: auto;
width: 60%;
padding: 10px;
top:50%;
}
@media screen and (width: 800px) {
.bg p {
font-size: .8em;
}
js
// Set the date we're counting down to
var countDownDate = new Date("Oct 14, 2017 10: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="countdown"
document.getElementById("countdown").innerHTML = days + "d " + hours + "h "
+ minutes + "m " + seconds + "s ";
// If the count down is over, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById("countdown").innerHTML = "EXPIRED";
}
}, 1000);
添加此附加代碼
<div class="bg">
<p class="makecenter" id="countdown"> </p>
</div>
CSS變更:
.makecenter {
height: 150px;
width: 500px;
position: fixed;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -200px;
}
我在下面創建了一個可待因。
這樣做可能是更好的方法,但是我使用百分比來獲得正確的對齊方式,並使用em度量字體。
您可以使用多個斷點(1024像素等)來調整大小以適應需要。
@media screen and (max-width: 768px) {
.bg p {
margin-top: 20%;
font-size: 2em;
}
嘗試更新CSS樣式
.bg { ... background-size: cover; /* if dimension of element is not matching with image, else you can use 'contain' */ }
為“ p”
.bg > p {
position: relative;
color: #333;
font-size: 350%; // change font-size accordingly.
text-align: center;
margin: 0;
top: 40%; // change position accordingly
left: 50%; // change position accordingly
transform: rotate(-5deg) translate(-55%, -50%);
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.