Question

My Dilemma

嘿大家好！所以上面的图片就是我想用我的代码实现的，不过一个或另一个总是推动另一个低于它或高于它，而不是只是坐在彼此之上。

我一直在读关于z-index和top：0;但无论我尝试什么，我似乎无法得到我想要的结果。可能是我在文本上使用淡入淡出的javascript效果，但我不确定。这是我的代码，你会推荐什么？谢谢！

    <style type="text/css">

body {
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    background-color: #FFFFFF;
    background-repeat: repeat;
    font-size: 12px;
    color: #333366;
}

#picOne, #picTwo {
position:relative;
display: none;
float:center;
}

#pics {
}

#my-object {
  position: absolute;
  z-index: 1;
  top: 0px;
}

</style>

<script src="http://code.jquery.com/jquery-1.4.4.min.js" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function() {
    $('#picOne').delay(1000).fadeIn(2000).delay(2500);
    $('#picTwo').delay(2000).fadeIn(1500).delay(2000);
});
</script>

</head>

<body>

<div id="pics" align="center">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>

<td valign="middle" align="center">
<table cellpadding="0" cellspacing="0" border="0">

        <tr>
        <td align="center" valign="middle"><font size="200" face="Arial" id="picTwo" color="black">SOME TEXT</font></td>
        </tr>

        <tr><td align="center" valign="middle">     
<script type="text/javascript" src="widgets.js"></script>
<script src="three.js" type="text/javascript"></script>
<script src="trail.js" type="text/css"></script>
<div id="my-object">
<canvas></canvas>
</div></td>
        </tr>


</table>
</td>
</tr>
</table>

</div>

</body>

</html>

Answer 1

我想这就是你要找的东西：http://jsfiddle.net/6C55n/

我将位置绝对设置为 - 文本和画布。之后我只是在画布上设置了更大的z-index。

这里应该注意的是画布使用透明图像。

<强>的JavaScript

var canvas = document.getElementById('can'),
    context = canvas.getContext('2d');

var img = document.createElement('img');
img.onload = function () {
    context.drawImage(this,0,0);
};
img.src = 'http://www.planet-aye.co.uk/seasonal05/snow.png';

<强> HTML

<canvas width="640" height="480" id="can"></canvas>
<div id="labelDiv">Some text</div>

<强> CSS

#labelDiv {
    font-size: 70px;
    position: absolute;
    top: 280px;
    left: 100px;
    z-index: 1;
}
#can {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 3;
}

Answer 2

这对我来说很好：JSFiddle

HTML

<p>Some text</p>
<canvas></canvas>

CSS：

body {
   background-color:#5FC0CE;
}

canvas {
  position:absolute;
  top:0;
  left:0;
  z-index:100;

  background-color:#FFAE73;  


  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  filter: alpha(opacity=50);
  -moz-opacity:0.5;
  -khtml-opacity: 0.5;
  opacity: 0.5;    
}

如何在文本上叠加画布？

2 个答案: