个人中心
gpt4 book ai didi

jquery - 将图像设置为 div

转载 作者：行者123 更新时间：2023-12-01 07:10:23 28 4
gpt4 key购买 nike

我正在尝试为 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 等，但它不适合我的需求。

有什么建议吗？

谢谢，埃里普

编辑

jsfiddle 有点误导，所以这是发生的事情的图片

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

编辑2

Edit 2

将 .content 中的 CSS 更改为:

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

我还有两个问题:

  1. I want there to be no image from the far left to 250px from the left (i.e., room for the sidebar)
  2. The page now scrolls. I want the image to fit on a single screen.

我尝试通过使用 left: 250px; 和 padding-left: 250px; 来解决第一个问题，但都不起作用。

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

最佳答案

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>

关于jquery - 将图像设置为 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28869783/

28 4 0
文章推荐： python - Beautiful Soup find() 未找到 Class 的所有结果
文章推荐： java - 无法在请求的时间内获得锁定问题
文章推荐： groovy - 这个，所有者，Groovy 闭包中的委托(delegate)
文章推荐： java - 树的递归和非递归遍历
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com