图片上的文字不适用于 "position fixed"
Text on image not working with "position fixed"
我在图像(内联 JS 元素)上的文本方面遇到了一些问题。这是一个倒数计时器,我想在图像上显示。该图像也固定为屏幕 window 大小。
代码在这里:https://jsfiddle.net/Lo7soz5f/
如果我从 #forsidediv 中删除 "position:fixed" 它可以工作,但是图像不再适合 window 大小。但是,如果我重新打开它,计时器将不再显示在图像上方。
HTML:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>onepageskiw</title>
<link href="styles.css" rel="stylesheet" type="text/css">
<script src="js.js"></script>
</head>
<body>
<div id="countdowner">
<div id="countdown"></div>
<div id="newcountdown"></div>
</div>
<div id="forsidediv">
<img id="forsidepic" src="https://images.unsplash.com/14/unsplash_524000a90aaad_1.JPG?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=dc7275b6369c623d975484143fbb6a17">
</div>
脚本:
<script>
CountDownTimer('02/19/2017 10:1 AM', 'countdown');
CountDownTimer('02/20/2017 10:1 AM', 'newcountdown');
function CountDownTimer(dt, id) {
var end = new Date(dt);
var _second = 1000;
var _minute = _second * 60;
var _hour = _minute * 60;
var _day = _hour * 24;
var timer;
function showRemaining() {
var now = new Date();
var distance = end - now;
if (distance < 0) {
clearInterval(timer);
document.getElementById(id).innerHTML = 'EXPIRED!';
return;
}
var days = Math.floor(distance / _day);
var hours = Math.floor((distance % _day) / _hour);
var minutes = Math.floor((distance % _hour) / _minute);
var seconds = Math.floor((distance % _minute) / _second);
document.getElementById(id).innerHTML = days + 'days ';
document.getElementById(id).innerHTML += hours + 'hrs ';
document.getElementById(id).innerHTML += minutes + 'mins ';
document.getElementById(id).innerHTML += seconds + 'secs';
}
timer = setInterval(showRemaining, 1000);
}
</script>
CSS:
@charset "utf-8";
body {
margin:0;
}
#countdowner {
color:white;
padding:1em;
position:absolute;
}
#forsidediv {
position:fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
text-align: center;
}
#forsidepic {
width: 100%;
}
如果我理解正确的话:
https://jsfiddle.net/Lo7soz5f/4/
只需更改您的 div 订单:
<div id="forsidediv">
<img id="forsidepic" src="https://images.unsplash.com/14/unsplash_524000a90aaad_1.JPG?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=dc7275b6369c623d975484143fbb6a17">
</div>
<div id="countdowner">
<div id="countdown"></div>
<div id="newcountdown"></div>
</div>
出现倒计时,但它落后于图像。
您可以通过更改 z-index 值将其置于前台。
在 #countdowner
和 #forsidediv
中设置 z-index
,但设置更高第一个值。
我在图像(内联 JS 元素)上的文本方面遇到了一些问题。这是一个倒数计时器,我想在图像上显示。该图像也固定为屏幕 window 大小。
代码在这里:https://jsfiddle.net/Lo7soz5f/
如果我从 #forsidediv 中删除 "position:fixed" 它可以工作,但是图像不再适合 window 大小。但是,如果我重新打开它,计时器将不再显示在图像上方。
HTML:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>onepageskiw</title>
<link href="styles.css" rel="stylesheet" type="text/css">
<script src="js.js"></script>
</head>
<body>
<div id="countdowner">
<div id="countdown"></div>
<div id="newcountdown"></div>
</div>
<div id="forsidediv">
<img id="forsidepic" src="https://images.unsplash.com/14/unsplash_524000a90aaad_1.JPG?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=dc7275b6369c623d975484143fbb6a17">
</div>
脚本:
<script>
CountDownTimer('02/19/2017 10:1 AM', 'countdown');
CountDownTimer('02/20/2017 10:1 AM', 'newcountdown');
function CountDownTimer(dt, id) {
var end = new Date(dt);
var _second = 1000;
var _minute = _second * 60;
var _hour = _minute * 60;
var _day = _hour * 24;
var timer;
function showRemaining() {
var now = new Date();
var distance = end - now;
if (distance < 0) {
clearInterval(timer);
document.getElementById(id).innerHTML = 'EXPIRED!';
return;
}
var days = Math.floor(distance / _day);
var hours = Math.floor((distance % _day) / _hour);
var minutes = Math.floor((distance % _hour) / _minute);
var seconds = Math.floor((distance % _minute) / _second);
document.getElementById(id).innerHTML = days + 'days ';
document.getElementById(id).innerHTML += hours + 'hrs ';
document.getElementById(id).innerHTML += minutes + 'mins ';
document.getElementById(id).innerHTML += seconds + 'secs';
}
timer = setInterval(showRemaining, 1000);
}
</script>
CSS:
@charset "utf-8";
body {
margin:0;
}
#countdowner {
color:white;
padding:1em;
position:absolute;
}
#forsidediv {
position:fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
text-align: center;
}
#forsidepic {
width: 100%;
}
如果我理解正确的话: https://jsfiddle.net/Lo7soz5f/4/ 只需更改您的 div 订单:
<div id="forsidediv">
<img id="forsidepic" src="https://images.unsplash.com/14/unsplash_524000a90aaad_1.JPG?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=dc7275b6369c623d975484143fbb6a17">
</div>
<div id="countdowner">
<div id="countdown"></div>
<div id="newcountdown"></div>
</div>
出现倒计时,但它落后于图像。 您可以通过更改 z-index 值将其置于前台。
在 #countdowner
和 #forsidediv
中设置 z-index
,但设置更高第一个值。