与图像的重叠跨度答案

【问题标题】：Overlap span with image与图像的重叠跨度
【发布时间】：2015-11-22 05:27:03
【问题描述】：

我无法将倒计时和按钮与Skull and crossbones 重叠。 z-index: 似乎不起作用。（我没有发布图片的声誉。）

我希望图片在倒计时为负数时可见，并且每隔一秒闪烁一次。

我怎样才能让骷髅和交叉骨重叠在一起？

jsfiddle.net/2Lufxs2t

<html xmlns="http://www.w3.org/1999/xhtml" >
    <head>
    <title>Countdown</title>
    <script type="text/javascript">
   var seconds = 10;

function stopTimer() {
    clearTimeout(countdownTimer)
}

function floor(x) {
    return x | 0;
}

function pad(n) {
    if (n < 0) {
      n = -n;
    }
    if (n < 10) {
        return '0' + n.toString();
    }
    return n.toString();
}

function secondPassed() {
    var minutes = pad(floor(seconds/60));
    if (seconds < 0) {
        minutes = '-' + minutes;
    }
    var remainingSeconds = pad(seconds % 60); 

    document.getElementById('countdown').innerHTML = minutes + ":" + remainingSeconds;
    if (seconds > 0) {
        seconds--;
        if (seconds > 8) {document.body.style.backgroundColor = "green"; }
        else if (seconds == 5) {document.body.style.backgroundColor = "yellow";}
        else if (minutes == 0 & seconds == 0) {document.body.style.backgroundColor = "red";}
    }
    else{
    seconds--;

        //if (seconds == 0 || seconds == 2 || seconds == 4 || seconds == 6 || seconds == 8 ) {document.getElementById("Image1").style.visibility= "visible";}
        //else {document.getElementById("Image1").style.visibility= "hidden";}
    }
}
    </script>
    </head>
    <body onload = "getSeconds()">
    <div ="wrapper">
    <span id="countdown" style="color:black; font-size: 500px; font-weight: bold"></span>

    <button onclick="countdownTimer = setInterval('secondPassed()', 1000)">Start</button>
    <button onclick="stopTimer()">Stop</button>

            <asp:Image ID="Image1" runat="server"  ImageUrl="\\scnas1\dev\vbdev\Time\skull.gif"
             />&nbsp;
    </div>
    </body>
    </html>

#Image1 
{
    z-index:0;
    position: absolute;
    top:0;
    left:0;
}
#countdown
{
    z-index:-1;
}

【问题讨论】：

会更好。如果您为您的问题创建 jsfiddle 演示，以便我们可以有效地帮助您
@SachinKadam 您如何在 JSFiddle 中使用图像？我是新手。
您不能直接将图片上传到 jsfiddle，但您可以使用第三方上传器，例如postimage.org。然后使用他们在 jsfiddle 中给出的 URL
@SachinKadam 按钮在我的机器上工作，但不是 jsfiddle，对不起。我不确定为什么会这样。 jsfiddle.net/3e2egof6/1
jsFiddle 只理解普通的 HTML，而不是像 ASP 这样的服务器端语言，所以你必须把渲染的代码放在那里，比如<img id="Image1" src="http://s15.postimg.org/es5w3xpob/skull.gif" />。另外，getSeconds 的代码在哪里？

标签： css z-index

【解决方案1】：

不是 100% 确定您的目标是什么。

但是我已经提供了一个我认为你可能会追求的例子

var startBtn       = document.getElementById('start'),
    stopBtn        = document.getElementById('stop'),
    timerEl        = document.getElementById('timer'),
    secondsPassed  = 0,
    secondsTimer   = null,
    updateLabel    = setInterval(function() {
        timerEl.innerHTML = secondsPassed + ' seconds'; //update the view every 1 second with the seconds passed.

        var color = 'green';
    
        if( secondsPassed >= 10 ){
            color = 'yellow';
        }
        if( secondsPassed >= 20 ){
            color = 'red';
        }
    
        document.body.style.backgroundColor = color;

    }, 1000);

startBtn.addEventListener('click', function() {
  
  clearInterval(secondsTimer); //incase its double clicked
  secondsPassed = 0; //remove this line if you dont want it to reset
  
  secondsTimer = setInterval(function() {
    secondsPassed++; //every 1 second we increase the second count
  }, 1000);
  
});

stopBtn.addEventListener('click', function() {
  clearInterval(secondsTimer); //when its clicked we just stop the timer
});

.wrapper {
  position: relative;
  margin-bottom: 20px;
}
.wrapper img {
  display: block;
  max-height: 200px;
}
.wrapper span {
  display: inline-block;
  position: absolute;
  top: 45%;
  left: 25%;
  color: red;
  background: white;
}

<div class="wrapper">
  <img id="Image1" src="http://s15.postimg.org/es5w3xpob/skull.gif" />
  <span id="timer"></span>
</div>

<button id="start">start</button>
<button id="stop">stop</button>

【讨论】：

感谢您的帮助，是的，我应该更清楚。对于开始格式，它不应该是骷髅头，而开始和停止是按钮。在倒计时期间，它应该是倒计时的按钮，一旦它是负数......我希望头骨每秒闪烁一次。你会看到我对 else 语句的尝试。很抱歉造成混乱。

【解决方案2】：

如果你想要按钮上的图像，未来的解决方案是使用 CSS 属性pointer-events: none，但它仍然是经验性的，看起来是 CSS 4 的一部分。只有在你最喜欢的浏览器中工作并且足够好时才使用它。另请参阅MDN 和 SO Pass mouse events through absolutely-positioned element

另一种解决方案是在包装容器上捕获事件，然后在代码中确定是否在开始或停止按钮上发生了单击事件，如果发生，则调用适当的处理程序函数。难以让浏览器以正常方式响应针对按钮的 mouseover/out 事件，但该方法已被使用。

下面示例中显示的另一个解决方案是在堆叠上下文中使用三层。将按钮和倒计时元素放在底层。将 scull 和 cross bone 放在中间层，将位于底层的按钮标签放在顶层。这些顶级label 元素将鼠标事件分派（副本）到实际按钮，而无需为此操作附加脚本。标签是隐藏的，需要仔细确定尺寸和放置。

在当前版本的 Firefox 和 IE 中工作：

<!DOCTYPE html><html><head><title>skull blink</title><meta charset="utf-8">
<style type="text/css">

.centerText
{    text-align: center;
}
#countdown
{   display: inline-block;
    height: 60px;
    width: 350px;
    color:black;
    font-size: 50px;
    font-weight: bold;
    transition: opacity 0.9s;
}
#countFill /* same size as #countdown */
{   display: inline-block;
    height: 60px;
    width: 350px;
}

div#z0 /*  parent node of #z10 and #z20  */
{   display: inline-block;
}
div#z10
{  display: inline-block;
   position: absolute;
   width: 350px;
   z-index: 10;
   visibility: hidden;
   transition: visibility 0.3s;
}
div#z20
{  display: inline-block;
   position: absolute;
   width: 350px;
   text-align: center;
   z-index: 20;
}
button.dimension /* same size as active start/stop buttons */
{  visibility: hidden;
}
#skullImg
{ height: 80px;
  display: inline-block;
}
</style>
<script>
var seconds = 10;
var countdownTimer = 0;

function startTimer() {
    if(!countdownTimer)
    {  countdownTimer = setInterval(secondPassed, 1000);
       secondPassed();  // start now
    }
}

function stopTimer() {
    clearTimeout(countdownTimer);
    countdownTimer = 0;
    showSkull(false);
}

function showSkull( on) {
    document.getElementById("z10").style.visibility = on ? "visible" : "hidden";
    document.getElementById("countdown").style.opacity = on ? 0 : 1;
}

 function floor(x) {
     return x | 0;
 }

function pad(n) {
    if (n < 0) {
        n = -n;
    }
    if (n < 10) {
        return '0' + n.toString();
    }
     return n.toString();
}

 function secondPassed() {
    var minutes = pad(floor(seconds / 60));
    if (seconds < 0) {
        minutes = '-' + minutes;
    }
    var remainingSeconds = pad(seconds % 60);

    document.getElementById('countdown').innerHTML = minutes + ":" + remainingSeconds;
    if (seconds > 8) {
        document.body.style.backgroundColor = "green";
    } else if (seconds == 5) {
        document.body.style.backgroundColor = "yellow";
    } else if (seconds ==0) {
        document.body.style.backgroundColor = "red";
    } else if (seconds < 0) {
        showSkull(seconds & 1) // odd seconds  
    }
    seconds--;
}
</script>
</head>
<body>
  <div class="centerText">
    <div id="z0">
    <div id="z10"><img src="http://s15.postimg.org/es5w3xpob/skull.gif" id="skullImg"></div>
    <div id="z20">
        <span id="countFill">&nbsp;</span><br>
        <label for="start"><button class="dimension">Start</button></label>
        <label for="stop"><button class="dimension">Stop</button></label>
    </div>
        <span id="countdown">&nbsp;</span><br>
        <button id="start" onclick="startTimer()">Start</button>
        <button id="stop" onclick="stopTimer()">Stop</button><br>
    </div>
    </div>
</body>
</html>

【讨论】：