14

我的困境

嘿大家！所以上面的图像是我试图用我的代码实现的，但是一个或另一个总是将另一个推到它的下方或上方，而不是仅仅坐在彼此之上。

我一直在阅读 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>
4

2 回答 2

12

我想这就是你要找的东西：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;
}

​</p>

于 2012-12-21T09:51:54.280 回答
6

这对我来说很好：JSFiddle

HTML

​&lt;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;    
}
于 2012-12-21T09:49:27.087 回答