Question

问题是，如果图像路径不在目录中，则html文件的实时预览不会在任何代码编辑器中显示css背景（我使用Brackets，Visual Studio Code和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

我找到了解决方案。我还使用Microsoft的Visual Code Editor进行了测试，并遇到了同样的问题。我想Atom也一样。

无论如何，解决方案是 - 我们需要教 localhost关于该目录。我不知道它是如何工作但它的工作原理。怪异。

我首先将文件放在文件夹中，以便文件和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

然后跑。

localhost获取父级中其他内容的映射目录，现在我们可以在其中的任何地方移动html和css文件父目录，它可以渲染图像。

也许这是一个缓存记忆物或者漂白剂被打断的东西。

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

2 个答案: