Question

我目前正在开发我的第一个完全响应的网站，因为我似乎有点卡住了。此外，我会提供一个小提琴，但我仍在学习如何使用它，

一切都像魅力一样，但我仍然在学习，这意味着我会遇到一两个问题。我尝试过不同的代码，尝试更改background: url(.cycle-slideshow);

我正在尝试使用

    .cycle-slideshow {
        height: 100%;
        width: 100%;
        display: block;
        position: relative;
        margin: 0 auto;
    }

作为背景，所以我可以在背景上使用它，因为你可以看到它隐藏在幻灯片后面。

/*Menu CSS*/

            #sidebar {
                background: #151718;
                width: 200px;
                height: 17%;
                display: block;
                position: absolute;
                left: -200px;
                top: 0px;
                transition: left 0.3s linear;
            }

                #sidebar.visible {
                    left: 0px;
                    transition: left 0.3s linear;
                }

            ul {
                margin: 0;
                padding: 0;
            }

                ul li {
                    list-style: none;
                }

                    ul li a {
                        background: #1C1E1F;
                        color: #ccc;
                        border-bottom: 1px solid #111;
                        display: block;
                        width: 180px;
                        padding: 10px;
                        text-decoration: none;
                    }

            #sidebar-btn {
                display: inline-block;
                vertical-align: middle;
                width: 20px;
                height: 150px;
                cursor: pointer;
                margin: 20px;
                position: absolute;
                top:0px;
                right:-60px;
            }

                #sidebar-btn span {
                    height: 1px;
                    background: #111;
                    margin-bottom: 5px;
                    display: block;
                }

                    #sidebar-btn span:nth-child(2) {
                        width: 75%;
                    }

                    #sidebar-btn span:nth-child(3) {
                        width: 50%;
                    }



/*Menu CSS*/

但我似乎无法使用HTMl，我是否必须使用JQuery函数才能使其工作？

这是源代码。

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Full Width Responsive Image Slider</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script src="http://malsup.github.com/jquery.cycle2.js"></script>
    <style type="text/css">
            html, body, img {
                padding: 0;
                margin: 0;
                height: 100%;
                width: 100%;
                background: url(.container);
            }

            body {
                font-family: "Helvetica Neue", Helvetica, Arial;
            }

        .container {
                height: 100%;
                width: 100%;
                overflow: hidden;
            }

            .cycle-slideshow {
                height: 100%;
                width: 100%;
                display: block;
                position: relative;
                margin: 0 auto;
            }

            .cycle-prev, .cycle-next {
                font-size: 200;
                color: #FFF;
                display: block;
                position: absolute;
                top: 50%;
                margin-top: -16px;
                z-index: 9999;
                cursor: pointer;
            }

            .cycle-prev {
                left: 10%;
            }

            .cycle-next {
                right: 10%;
            }

            .cycle-pager {
                width: 100%;
                text-align: center;
                display: block;
                position: absolute;
                position: top;
                bottom: 20px;
                z-index: 9999;
            }

                .cycle-pager span {
                    text-indent: 100%;
                    white-space: nowrap;
                    ;
                    width: 12px;
                    height: 12px;
                    display: inline-block;
                    border: 1px solid #FFF;
                    border-radius: 50%;
                    margin: 0 10px;
                    cursor: pointer;
                }

                .cycle-pager .cycle-pager-active {
                    background: #FFF;
                }


/*Menu CSS*/

            #sidebar {
                background: #151718;
                width: 200px;
                height: 17%;
                display: block;
                position: absolute;
                left: -200px;
                top: 0px;
                transition: left 0.3s linear;
            }

                #sidebar.visible {
                    left: 0px;
                    transition: left 0.3s linear;
                }

            ul {
                margin: 0;
                padding: 0;
            }

                ul li {
                    list-style: none;
                }

                    ul li a {
                        background: #1C1E1F;
                        color: #ccc;
                        border-bottom: 1px solid #111;
                        display: block;
                        width: 180px;
                        padding: 10px;
                        text-decoration: none;
                    }

            #sidebar-btn {
                display: inline-block;
                vertical-align: middle;
                width: 20px;
                height: 150px;
                cursor: pointer;
                margin: 20px;
                position: absolute;
                top:0px;
                right:-60px;
            }

                #sidebar-btn span {
                    height: 1px;
                    background: #111;
                    margin-bottom: 5px;
                    display: block;
                }

                    #sidebar-btn span:nth-child(2) {
                        width: 75%;
                    }

                    #sidebar-btn span:nth-child(3) {
                        width: 50%;
                    }



/*Menu CSS*/




    </style>
</head>
<body>

    <div id="sidebar">

        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Contact</a></li>
        </ul>


    <div id="sidebar-btn">
        <span></span>
        <span></span>
        <span></span>
    </div>




    </div>

    <!-- Full Width Responsive Slider -->

    <div class="container">

            <div class="cycle-slideshow">
            <span class="cycle-prev">〈</span>
            <span class="cycle-next">〉</span>
            <span class="cycle-pager"></span>
            <img src="images/picOne.jpg">
            <img src="images/picTwo.jpg">
            <img src="images/picThree.jpg">
          </div>
        <!-- Full Width Responsive Slider -->

        </div>
    <script type="text/javascript">
    $(document).ready(function(){

        $('#sidebar-btn').click(function(){
            $('#sidebar').toggleClass('visible');

        });
    }); 
    </script>
</body>

</html>

Answer 1

如果您希望元素在另一个元素之上分层，就像Photoshop文档中的图层一样，您可以使用z-index属性。 z-index要求您使用它的元素具有静态以外的定位。 z-index的数字越小意味着层数越低 - 数字越高，前面的数字越多＆＃34;元素的其他层次。

因此，如果您的#sidebar元素隐藏在幻灯片放映的后面/下面，请尝试以下操作：

#sidebar {
    background: #151718;
    width: 200px;
    height: 17%;
    display: block;
    position: absolute;
    left: -200px;
    top: 0px;
    transition: left 0.3s linear;
    z-index: 1000;
}

.container {
    height: 100%;
    width: 100%;
    overflow: hidden;
    position: relative;
    z-index: 900;
}

由于.container元素的z-index低于#sidebar，它将出现在侧边栏的后面。

默认情况下，如果没有在CSS中显式设置z-index，元素将根据它们在DOM中的出现进行分层，其中的项目会发生在DOM的最上面。

http://www.w3schools.com/cssref/pr_pos_z-index.asp

Answer 2

对于background属性，正确的写入方式是

background: url(IMAGE PATH);
ex. background: url('images/photo.jpg');

此外，当您使用背景图片时，请确保使用

background-size: cover or contain or manual px;
background-position: 50% 50%;

*注意：这两个属性不适用于旧的IE浏览器。我希望这会有所帮助。

如何使用块级元素作为背景

2 个答案: