时间戳

首页 > 解决方案 > 背景图像完全停止加载

html - 背景图像完全停止加载

问题描述

因此，我使用 CDN 在为学校构建的页面中使用引导程序，并添加了代码来加载背景图像并将其拉伸到整个页面。现在这很奇怪的原因是它刚刚停止工作。它以前加载图像没有问题，但现在它没有。当我在 chrome 上使用开发人员视图检查页面并选择“源”选项卡时，它甚至没有在其中显示图像。它与我的 index.html 位于同一目录级别。奇怪的是，这曾经加载过。它会加载，调整窗口大小看起来很棒，然后突然停止加载背景。我尝试为它指向不同的图像，在开发人员模式下硬重新加载和清除缓存。没有骰子。不再加载背景。

<style> 
        body {
          background: url('bkgrnd3.jpg') no-repeat center center fixed;
          -webkit-background-size: cover;
          -moz-background-size: cover;
          background-size: cover;
          -o-background-size: cover;
        }
    </style>  

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Grainy Travel: Plan Your Escape with 100% Humans! </title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
        <style>
        .fakeimg {
        height: 200px;
        background: #aaa;
        }
        </style>
        
        <style> <!--custom style for background images!-->
            body {
   background: url('https://www.w3schools.com/images/picture.jpg') no-repeat center center fixed;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   background-size: cover;
   -o-background-size: cover;
 }
        </style>
        
        <script>
            var travelImages = ["photos/DenmarkCopenhagen.jpg","photos/EiffeltopParis.jpg","photos/GoldenGateBridge.jpg"]
            var descs = ["Visit a City With Fish!", "Go to the Top of the Eifel Top!", "Check out a Red Bridge Across the Water!"];
            
            var urls = ["https://www.visitcopenhagen.com/", "https://www.toureiffel.paris/en", "https://www.goldengate.org/"]
            function displayImage(index)
            {
                var img = document.getElementById("myImage");
                img.src = travelImages[index];
            }
            
            function openWindow(url)
            {
                var win = open(url, "", "height=200,width=300,top=100,left=100,menubar=no");
                var timer = setTimeout(function(){
                    win.close();
                    }, 3000);
            }
        </script>
        <style>
            .navbar-custom {
            background-color: #20c997;
            }
        </style>        

    </head>
    <body>
    <!--New Bootstrapped Navbar!-->
    <nav class="navbar navbar-expand-sm navbar-custom navbar-light sticky-top">
      <a class="navbar-brand" href="index.html"><img src="Home.png" alt="logo" style="width:30px;">Home</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="collapsibleNavbar">
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link" href="contacts.html">Agent Information</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="register.html">Customer Registration</a>
          </li>    
        </ul>
      </div>  
    </nav>

        <div class="jumbotron text-center" style="margin-bottom:0 ">
            <h1>Welcome to Grainy Travel</h1>
        </div>
        <article>
                <!--These containers make a table from arrays of images, descriptions and links. Onclicks open links, onmouseovers display an image below the table!-->
                <div class="container"><table class="table table-dark">
                
                    <script>
                        for(var i=0; i < descs.length; i++)
                        {
                            document.write("<tr>");
                            var myString = "<td class=\"col-sm-6\"><img src='" + travelImages[i] + "' onclick='openWindow(\"" + urls[i] + "\")' /></td><td class=\"col-sm-6\">" + descs[i] + "</td>";
                            console.log(myString);
                            document.write(myString);
                            document.write("</tr>");
                        }
                    </script>
                </table></div>
                <div class="container">
                    <table class="table table-dark">
                    
                        <script>
                            for(var i=0; i < descs.length; i++)
                            {
                                document.write("<tr>");
                                var myString = "<td class=\"col-sm-6\" onmouseover='displayImage(" + i + "); '>" + descs[i] + "</td>";
                                console.log(myString);
                                document.write(myString);
                            }
                        </script>
                        <td class="col-sm-6" ><img id="myImage"/>
                        </td>
                        </tr>
                        </table>
                </div>
                    
                
        </article>
    <div class="footer">
            Copyright 2021 &copy;
        </div>
        
    </body>
</html>

标签： htmlcssbootstrap-4

解决方案

我认为问题在于图像的路径。在下面的 jsfiddle 中，我已经为此示例从网络中放置了图像源的完整路径。您可以尝试将完整路径放在图像css的语句中。正如您所说，不显示图像。background: url('bkgrnd3.jpg')bkgrnd3.jpgSource

body {
  background-image: url("https://www.w3schools.com/images/picture.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  background-position: center;
}
<body>

</body>

推荐阅读