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

Question

I am currently working on my first fully responsive website and as it seems I'm kinda stuck. 我目前正在我的第一个完全响应式网站上工作，看来我有点受阻。 Also I would provide a fiddle but I am still learning how to use it, 我也会提供一个小提琴，但我仍在学习如何使用它，

Everything works like a charm, but I am still learning which means that I will occur a problem or two. 一切都像魅力，但我仍在学习，这意味着我将遇到一两个问题。 I've tried different codes, trying to change the 我尝试了不同的代码，试图更改
background: url(.cycle-slideshow);

I am trying to use the 我正在尝试使用

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

as a background so I can use this ontop of the background, because as you can see its hiding behind the slideshow. 作为背景，因此我可以在背景的上方使用它，因为您可以看到它隐藏在幻灯片后面。

/*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*/

but I cant seem to get it to work with HTMl, will I have to use a JQuery function to get it to work? 但是我似乎无法使其与HTMl一起使用，是否需要使用JQuery函数使其起作用？

Here is the source code. 这是源代码。

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

If you want an element to be layered on top of another, much like the layers in a Photoshop document, you can use the z-index property. 如果您希望一个元素在另一个元素上分层，就像在Photoshop文档中一样，则可以使用z-index属性。 z-index requires the element you use it on to have positioning other than static. z-index要求您在其上使用的元素具有静态以外的位置。 Lower numbers for z-index mean lower layers - the higher the number, the more "in front" of other layers the element would be. z-index的数字越小，表示层越低-该数字越大，该元素在其他层的“位于最前面”的位置越多。

So if your #sidebar element is hiding behind / under the slideshow, try this: 因此，如果您的#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;
}

Since the .container element has a z-index that is lower than #sidebar, it will appear behind the sidebar. 由于.container元素的z索引小于#sidebar，因此它将出现在sidebar的后面。

By default, without z-index being explicitly set in your CSS, elements will layer according to their occurrence in the DOM, with items that happen farther down the DOM being on top. 默认情况下，如果没有在CSS中显式设置z-index，则元素将根据它们在DOM中的出现进行分层，将发生在DOM下方的项放在顶部。

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

Answer 2

As for the background property, the correct way to write is 至于background属性，正确的写法是

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

Also, when you use background image, make it sure to use with 另外，使用背景图片时，请确保与

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

*Note: Those two properties do not work with old IE browsers. *注意：这两个属性不适用于旧版IE浏览器。 I hope this helps. 我希望这有帮助。

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

问题描述

2 个解决方案

解决方案1
1 已采纳 2015-12-19 04:13:35

解决方案2
0 2015-12-19 04:02:24

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

问题描述

2 个解决方案

解决方案1 1 已采纳 2015-12-19 04:13:35

解决方案2 0 2015-12-19 04:02:24

解决方案1
1 已采纳 2015-12-19 04:13:35

解决方案2
0 2015-12-19 04:02:24