实时预览未在任何代码编辑器中显示 css 背景

Question

问题是，html 文件的实时预览未在任何代码编辑器中显示 css 背景 （我使用 Brackets、Visual Studio 代码和 Netbeans 进行了测试) 如果图片路径不在html 文件的目录中。它无法读取上层目录，所有代码编辑器都不会出现相同的错误。我附上了问题的屏幕截图和代码片段。我在 Linux Ubuntu 16.04 上，只有在用 Bleachbit 清理我的系统后我才遇到这个问题。实时服务器有问题。以前是没事的。两天前，如果整个目录不在主文件夹中，则无法显示背景。现在它没有显示在任何地方。这可能是什么问题？提前致谢。

tree ~/Desktop/Example
    /home/myhome/Desktop/Example
    ├── Images
    │   └── 1.png
    └── pages
        ├── index.htm
        └── testing.css

screenshot of the problem

body {
  max-width: 90%;
  margin: 0 auto;
  padding: 1em 2em;
  font: 100% 'Courier New', monospace;
  vertical-align: baseline;
}

.filler {
  background: url('../Images/1.png') repeat;
  max-width: 70%;
  min-height: 300px;
  margin: 0 auto;
}

.text-wrapper {
  max-width: 70%;
  text-align: center;
  padding: 1em 1.5em;
  margin: 0 auto;
}

h2 {
  text-transform: capitalize;
  font: bold 2em 'Open Sans', sans-serif;
  color: lightgoldenrodyellow;
}

.para-70 {
  text-align: justify;
  color: lightgoldenrodyellow;
}

.para-70v1::first-letter {
  font-size: 1.5em;
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 3em;
  color: whitesmoke;
  line-height: 10px;
  white-space: nowrap;
}

<!DOCTYPE HTML>
<html lang="en">

<head>
  <title>Testing page</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="testing.css">
  <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
</head>

<body>
  <div class="filler">
    <div class="text-wrapper">
      <h2>A heading</h2>
      <i class="material-icons">code</i>
      <p class="para-70 para-70v1">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras non odio venenatis, sodales dolor eu, mollis erat. Donec in facilisis quam. Donec ipsum dolor, tempus vel arcu molestie, placerat porttitor eros. Aliquam euismod facilisis nisi, eget viverra
        velit. Aenean semper pulvinar feugiat. Mauris ornare neque quis eros mollis porta. Mauris tempor eu arcu ullamcorper ullamcorper
      </p>
    </div>
  </div>
</body>

</html>

Answer 1

试试这个：

background: url(../Images/1.png)

而不是 background: url('../Images/1.png').

另外，请参阅 this post 了解您的项目结构。希望对您有所帮助:)

Answer 2

我找到了解决办法。我也用微软的可视化代码编辑器测试过，也遇到了同样的问题。我想 Atom 也会如此。

无论如何，解决办法是—— 我们需要教导本地主机有关目录的信息。我不知道它是如何工作的，但它确实有效。奇怪。

我首先将文件从文件夹中取出，以便文件和 Images 文件夹位于同一父目录中。

tree ~/Desktop/Example
    /home/myhome/Desktop/Example
    ├── Images
    │   └── 1.png
    ├── testing.htm
    └── testing.css
    └── pages

而不是，

tree ~/Desktop/Example
    /home/myhome/Desktop/Example
    ├── Images
    │   └── 1.png
    └── pages
        ├── testing.htm
        └── testing.css

和运行。

Once the localhost gets the map of what else are in the parent directory, now we can move the html and css files anywhere in that parent directory and it can render the images.

可能是缓存内存问题或 bleachbit 中断的问题。

实时预览未在任何代码编辑器中显示 css 背景

Live Preview not showing css background in any Code Editor

html

css

localhost

adobe-brackets

ubuntu-16.04