Question

我试图将背景图片设置为div，但它并没有像预期的那样工作。

我有标题，页脚和侧边栏。标题高80像素，页脚高10像素，侧边栏从屏幕左侧延伸250像素。我希望我的内容div成为剩下的屏幕。

我写了以下代码：

<!DOCTYPE html>
<html>
<head>
    <title>Testing My HTML and CSS</title>
    <style>

        * {
            padding: 0;
            margin: 0;
            font-family: arial;
        }

        body .sidebar {
            display:block;
        }

        body.loaded .sidebar {
            display:none;
        }

        .header {
            background-color: black;
            height: 80px;
            width: 100%;
            text-align: center;
            line-height: 2;
            color: white;
        }

        .sidebar {
            background-color: #ebebeb;
            position: absolute;
            width: 200px;
            top: 80px;
            bottom: 0;
            padding-top: 10px;

        }

        .sidebar li {
            color: black;
            list-style-type: none;
            margin-top: 30px;
            width: 100%;

        }

        .sidebar li a {
            text-decoration: none;
            margin-top: 30px;
            margin-left: 30px;
            background-color: #9da1a4;
            width: 100px; 
            padding: 8px;
            border: 1px solid silver; 
            border-radius: 5px; 

        }

        .content {
            height: 340px;
            width: 523px;
            background-image: url("arbor.jpeg");
            background-size: cover;
        }

        .menu-btn {
            background-image: url("menu.png");
            float: left;
            height: 48px;
            width: 44px;
            margin-left: 50px;
            margin-top: -35px;
        }

        .footer {
            width:100%;
            height:30px;
            position:absolute;
            text-align: center;
            color: white;
            background-color: black;
            padding-top: 10px;
            bottom:0;
            left:0;
        }

    </style>
    <script src="js/jquery.min.js"></script>

</script>
</head>
<body>
    <div id="home">
        <div class="header">
            <h1>Hello, World!</h1>
            <div class="menu-btn"></div>
        </div>
        <div class="sidebar">
            <li><a href="#">Hello</a></li>
        </div>
        <div class="content">
        </div>
        <div class="footer">
            <p>Hello</p>
        </div>
    </div>

    <script>
        $(function() {
            $('body').addClass('loaded');
        });

        $(".menu-btn").on("click", function(){
            $(".sidebar").slideToggle(600);
        });
    </script>
</body>
</html>

可以在this jsfiddle中找到。

我的目标是将.content中的图像设置为背景。

我已尝试过background-attachment: fixed;，background-size: cover等等，但它并不适合我的需求。

有什么建议吗？

谢谢， erip

修改

jsfiddle有点误导，所以这里有一张发生了什么的图片

Actual result 左上角的菜单按钮驱动下拉列表。

编辑2

Edit 2

将.content中的CSS更改为：

    .content {
        height: 100vh;
        width: 100%;
        background-image: url("arbor.jpeg");
        background-size: cover;
    }

我还有两个问题：

我希望从最左边到左边250px没有图像（即边栏的空间）

页面现在滚动。我希望图像适合单个屏幕。

我试图通过玩left: 250px;和padding-left: 250px;来解决第一个问题，但都没有效果。

我希望我提供了足够的信息。

Answer 1

.content的高度和宽度是个问题。尝试以下编辑，同时从.content：

中删除高度

body, html, #home, .content {
  height:100%;
}

here's a fiddle

Answer 2

 .content {
                height:100vh;   
                width:100%;     
                background-image: url(http://i.imgur.com/3WWnZZj.jpg?1);
                background-size: cover;
            }

Answer 3

您已获得.content和height: 340px;的固定维度width:523px。 background-size:cover;正在发挥作用。问题是你的div只会是523px x 340px，而不是像你想要的那样填充页眉和页脚留下的空间。

.content {
    height: 340px;
    width: 523px;
    background-image: url(http://i.imgur.com/3WWnZZj.jpg?1);
    background-size: cover;
}

Answer 4

background-size:cover实际上可以达到您想要的目的，但是，如果您要检查HTML元素的大小比例，您会发现它很乱并因此导致结果不是你所期望的。

我已经包含了下面的解决方案，这几乎是一个完整的返工。看看结果是否符合预期。

<html>
    <head>
        <style>
        html,body {
            padding: 0;
            margin: 0;
            font-family: arial;
        }

        html, body, #home{
            width, height:100%;
        }

        #home{
            min-height:100%;
            position:relative;
        }

        body .sidebar {
            display:block;
        }

        body.loaded .sidebar {
            display:none;
        }

        .header {
            background-color: black;
            height: 80px;
            width: 100%;
            text-align: center;
            line-height: 2;
            color: white;
            display:flex; align-items: center; 
            z-index: 1;
            position:relative;
        }

        .menu-btn {
            background-image: url(http://i.imgur.com/cT9D02u.png?1);
            height: 48px;
            width: 44px;
            margin-left:50px;
        }

        .header h1{
            width:100%;
            margin:0;padding:0;
        }

        .sidebar {
            background-color: #ebebeb;
            position: absolute;
            width: 200px;
            top: 80px;
            bottom: 0;
            padding-top: 10px;

        }

        .sidebar li {
            color: black;
            list-style-type: none;
            margin-top: 30px;
            width: 100%;

        }

        .sidebar li a {
            text-decoration: none;
            margin-top: 30px;
            margin-left: 30px;
            background-color: #9da1a4;
            width: 100px; 
            padding: 8px;
            border: 1px solid silver; 
            border-radius: 5px; 

        }

        .content{
            margin-top: -80px; /* Header height */
            height:100%;
            margin-left: 250px;
            background-image:url(http://i.imgur.com/3WWnZZj.jpg?1);
            background-size:cover;
        }

        .footer {
            width:100%;
            height:30px;
            text-align: center;
            color: white;
            background-color: black;
            padding-top: 10px;
            bottom:0;
            left:0;
            position:absolute;
        }
        </style>
        <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.0.min.js"></script>
        <script>
            $(function() {
                $('body').addClass('loaded');
            });

            $(".menu-btn").on("click", function(){
                $(".sidebar").slideToggle(600);
            });
        </script>
    </head>
    <body>
        <div id="home">
            <div class="header">
                <div class="menu-btn"></div>
                <h1>
                    Hello World!
                </h1>
            </div>
            <div class="sidebar">
                <li><a href="#">Hello</a></li>
            </div>
            <div class="content">
            </div>
            <div class="footer">
                <span>Hello</span>
            </div>
        </div>
    </body>
</html>

将图像设置为div

4 个答案: