Question

所以这可能是一个非常简单的问题，但我现在有一个心态障碍。我正在尝试将此代码与我的网站集成，但由于图像是背景图层，因此我无法将其显示在页面上的其他元素上方。

那么有没有办法在HTML中代替CSS编写背景图像，因此可以给它一个z-index属性，以便它叠加在其他元素之上？

以下是最简单的代码

（遗漏了一些东西，现在应该工作了。）

<!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>

Answer 1

首先，使用正文背景标记设置背景：

<body background="http://farm8.staticflickr.com/7013/6448917381_0b754e86fb_z.jpg" id=bkgrnd>

然后，使用脚本设置z-index：

<script>
function changeStackOrder()
{
document.getElementById("bkgrnd").style.zIndex="1";
}
</script>

层堆叠问题

1 个答案: