将图像设置为 div答案

【问题标题】：Setting an image to a div将图像设置为 div
【发布时间】：2015-03-05 13:20:56
【问题描述】：

我正在尝试将背景图片设置为 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 有点误导，所以这里是正在发生的事情的图片

左上角的菜单按钮驱动下拉菜单。

编辑 2

将.content中的CSS更改为：

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

我还有两个问题：

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

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

我试图通过使用left: 250px; 和padding-left: 250px; 来解决第一个问题，但都没有成功。

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

【问题讨论】：

看起来它正在你的小提琴上工作。
查看有问题的编辑。
@erip 你希望图片在页眉和页脚正下方占据整个屏幕
为什么不把.content的宽度设置为100%呢？这里看看jsfiddle.net/kpkzf7wo/1
如果您也需要在多个图像上使用类似功能，您可以使用这个 jquery 插件 - johnpolacek.github.io/imagefill.js

标签： jquery html css

【解决方案1】：

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>

【讨论】：

感谢返工。我一周前刚开始写 HTML 和 CSS，所以我知道我不是很擅长。这很好用。非常感谢。
只是一个简单的问题——我按照 HTML5 的要求添加了<!DOCTYPE html>，但这个解决方案不起作用。很好，但是您的修复的哪一部分不符合 HTML5 标准？
width, height:100% 部分。把它变成 2 行

【解决方案2】：

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

【讨论】：

【解决方案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;
}

【讨论】：

诚然，我忘记更改我所做的最后一分钟更改（即修复图像的大小）。通过使用background-size: cover; 和background-attachment: fixed;，我得到了更接近的结果，但它只会显示图像中的云。

【解决方案4】：

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

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

here's a fiddle

【讨论】：

这样的问题是你可以滚动并且页脚不再位于页面底部。
你的页脚位于absolute，删除它。
我想要absolute。我希望我的图像填满屏幕的其余部分，而不是定义屏幕的大小。
背景图片永远不会定义高度，这就是上面CSS的原因。