CSS 背景网址会显示 Bracket 的实时预览，但在直接通过 Chrome 或 Safari 打开时不起作用

Question

我的代码可以在括号的实时预览中显示效果，但直接使用Chrome或Safari打开时不会显示。

HTML 
<div class="jumbotron">
    <p>we develop <span>brands</span></p>
    <a href="">projects</a>
</div>

CSS 
.jumbotron {
    display: block;
    width: 100%;
    height: 665px; 
    background: url("/img/Creative/bg-final.jpg") center no-repeat; 
    background-size: cover;
    padding: 0;
    margin: 0; 
}

我只想在使用Safari或Chrome打开时显示我的背景图像。

谢谢

Answer 1

括号LIVE Preview在您的项目文件夹的根上创建正在解决"/img/creative ..."的本地服务器。当您在浏览器中打开HTML文件时，它正在寻找"/img/creative"的hartdrive。

如果您需要在没有服务器的情况下可以在浏览器中打开页面，则需要使用相对路径。因此，如果您的CSS文件在" stylesheets/style.css"中，例如，您将使用../img/creative"来引用您的图像。

" ../"将您提高文件夹结构的级别。

Answer 2

您正在使用错误的代码。尝试此 - 背景图像：URL(" Paper.gif"(;我知道您正在使用速记代码，但请尝试。还始终将图像放在同一文件夹中，因此您不必再次编写整个长地址＆amp;再次。