层叠加问题
层叠加问题
提问于 2014-01-13 05:01:42
所以这可能是一个非常简单的问题，但我现在有一个思维障碍。我正在尝试将此代码与我的网站集成，但是由于图像是一个背景层，我不能让它出现在页面上的其他元素之上。
那么，是否有一种方法可以在HTML中对背景图像进行编码，而不是CSS，这样就可以给它一个z索引属性，这样它就可以堆在其他元素的上面吗？
代码以最简单的形式如下所示
(遗漏了一些东西，现在就该起作用了)。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<link href="home%20css.css" rel="stylesheet" type="text/css"/>
<script src="http://code.jquery.com/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="http://static.tumblr.com/jvojroo/DIamwjvp3/jquery.caroufredsel-6.2.0-packed.js" type="text/javascript"></script>
<script src="https://raw.github.com/jasonenglish/jquery-flex/master/jquery.flex.js"></script>
<script type="text/javascript">
$(function() {
$(".button0").flex();
});
</script>
<style type="text/css">
.button0 {
position:relative;
width:850px;
min-height:300px;
}
.button0 a {
width:100px;
height:100px;
position:absolute;
background-repeat:no-repeat;
background-position:center;
}
[bb=a] {background-image: url(http://farm8.staticflickr.com/7013/6448917381_0b754e86fb_z.jpg);
position: absolute;
z-index: 100;
}
/* [bg=b] {background-image:url(http://farm9.staticflickr.com/8156/7362866426_bf285ebd45.jpg);background-size:300px auto;}
[bg=c] {background-image:url(http://farm6.staticflickr.com/5117/7410370290_0935419fc3.jpg);}
[bg=d] {background-image:url(http://farm8.staticflickr.com/7262/7419245080_bb752ed1d6.jpg);}
[bg=e] {background-image:url(http://farm8.staticflickr.com/7003/6468321069_3375be3073_z.jpg);background-size:auto 280px;}
[bg=f] {background-image:url(http://farm8.staticflickr.com/7220/7342556872_46cddaf9b0.jpg);background-size:auto 280px;}
[bg=g] {background-image:url(http://farm9.staticflickr.com/8021/7322604950_348c535903.jpg);background-size:auto 200px;}
[bg=h] {background-image:url(http://farm8.staticflickr.com/7076/7286717012_6e6b450243.jpg);}
[bg=i] {background-image:url(http://farm8.staticflickr.com/7129/7452167788_a3f6aa3104.jpg);background-size:auto 200px;}
[bg=j] {background-image:url(http://farm8.staticflickr.com/7153/6480022425_a8d419e663_z.jpg);background-size:auto 280px;}
[bg=k] {background-image:url(http://farm8.staticflickr.com/7225/7269592732_c4b7918626.jpg);background-size:auto 280px;} */
</style>
<body>
<div class="button0">
<a bb="a" style="left:0px;top:0px;width:10%;height:140px;" width="145%" height="140"></a>
<!--<a bg="b" style="left:260px;height:100px;top:0px;width:125px;" width="250" height="175">B</a>
<a bg="c" style="left:395px;height:250px;top:0px;width:75px;" width="125" height="350">C</a>
<a bg="d" style="left:480px;height:75px;top:0px;width:75px;" width="175" height="150">D</a>
<a bg="e" style="left:565px;height:125px;top:0px;width:200px;" width="200" height="250">E</a>
<a bg="f" style="left:480px;height:200px;top:85px;width:75px;" width="150" height="225">F</a>
<a bg="g" style="left:0px;height:100px;top:135px;width:75px;" width="305" height="150">G</a>
<a bg="h" style="left:260px;height:75px;top:110px;width:125px;" width="200" height="200">H</a>
<a bg="i" style="left:85px;height:140px;top:135px;width:165px;" width="200" height="140">I</a>
<a bg="j" style="left:565px;height:150px;top:135px;width:75px;" width="125" height="275">J</a>
<a bg="k" style="left:650px;height:75px;top:135px;width:75px;" width="75" height="200">K</a> -->
</div>
</body>回答 1
Stack Overflow用户
回答已采纳
发布于 2014-01-13 05:15:14
首先，使用body背景标记设置背景：
<body background="http://farm8.staticflickr.com/7013/6448917381_0b754e86fb_z.jpg" id=bkgrnd> 然后，使用脚本设置z索引：
<script>
function changeStackOrder()
{
document.getElementById("bkgrnd").style.zIndex="1";
}
</script>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/21084189
复制相关文章
相似问题
腾讯云开发者
