Live-Vorschau zeigt nicht CSS-Hintergrund in einem Code-Editor

Das Problem ist, Live-Vorschau für HTML-Dateien zeigen nicht Css Hintergründe in allen Code-Editoren (ich getestet mit Brackets, Visual Studio Code und Netbeans), wenn der Bildpfad ist nicht im Verzeichnis der HTML-Datei. Es kann keine oberen Verzeichnisse lesen und alle Code-Editoren können nicht denselben Fehler haben. Ich füge einen Screenshot des Problems und der Code-Schnipsel bei. Ich bin auf Linux Ubuntu 16.04 und ich habe dieses Problem nur nach der Reinigung meines Systems mit Bleachbit. Etwas stimmt nicht mit der Live-Server-Sache. Zuvor war es in Ordnung. Vor zwei Tagen konnte es die Hintergründe nicht anzeigen, wenn sich das gesamte Verzeichnis nicht im Home-Ordner befindet. Jetzt zeigt es es nirgends mehr. Was könnte das Problem hier sein? Vielen Dank im Voraus.Live-Vorschau zeigt nicht CSS-Hintergrund in einem Code-Editor

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>

Quelle

2017-07-09 SMalakar

Ich fand eine Lösung. Ich habe auch mit dem Visual Code Editor von Microsoft getestet und hatte das gleiche Problem. Ich denke, das wird auch mit Atom sein.

Wie auch immer, die Lösung ist - Wir müssen lehren localhost über das Verzeichnis. Ich weiß nicht, wie es funktioniert, aber es funktioniert. Seltsam.

Zuerst legte ich die Dateien aus dem Ordner, so dass die Dateien und der Bilderordner im selben übergeordneten Verzeichnis sind.

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

stattdessen von

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

und laufen.

Sobald die localhost die Karte von bekommen, was sonst in der Mutter Verzeichnis, jetzt können wir die HTML und CSS-Dateien überall in diesem übergeordneten Verzeichnis verschieben und es kann die Bilder machen.

Vielleicht ist es ein Cache-Speicher-Ding oder etwas, das Bleichmittel unterbrochen.

Quelle

2017-07-10 21:21:41 SMalakar

Versuchen Sie folgendes:

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

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

Siehe auch this post für Ihre Projektstruktur. Hoffe es hilft :)

Quelle

2017-07-10 00:53:23 Chip

Versucht und funktioniert nicht. Egal was, es kann einfach keine oberen Verzeichnisse lesen. Nur wenn sie in demselben Verzeichnis abgelegt sind. – SMalakar

Live-Vorschau zeigt nicht CSS-Hintergrund in einem Code-Editor

Antwort

Verwandte Themen