Hoe geef je het pad voor de achtergrondafbeelding in CSS op?

Mijn CSS-bestand bevindt zich in:

Project/Web/Support/Styles/file.css

Mijn afbeelding staat in:

Project/Web/images/image.png

Ik wil deze afbeelding in mijn CSS-bestand.

Ik heb geprobeerd:

1) background-image: url(/images/image.png);
2) background-image: url('/images/image.png');
3) background-image: url("/images/image.png");
4) background-image: url(../images/image.png);
5) background-image: url('../images/image.png');
6) background-image: url("../images/image.png");

Maar. ik krijg deze afbeelding niet op mijn pagina.

Wat is de juiste manier om het pad van het afbeeldingsbestand in het css-bestand op te geven?


Antwoord 1, autoriteit 100%

Uw CSS is hier: Project/Web/Support/Styles/file.css

1 keer ../ betekent Project/Web/Support en 2 keer ../ d.w.z. ../../ betekent Project/Web

Probeer:

background-image: url('../../images/image.png');

Antwoord 2, autoriteit 8%

Er zijn twee basismanieren:

url(../../images/image.png)

of

url(/Web/images/image.png)

Ik geef de voorkeur aan het laatste, omdat het gemakkelijker is om mee te werken en vanaf alle locaties op de site werkt (dus ook handig voor inline afbeeldingspaden).

Let wel, ik zou niet zoveel mappen diep nesten. Het lijkt onnodig en maakt het leven een beetje moeilijk, zoals je hebt gemerkt.


Antwoord 3, autoriteit 4%

Gebruik het onderstaande.

background-image: url("././images/image.png");

Dit zal werken.


Antwoord 4, autoriteit 2%

Je moet 2 mappen terughalen uit je css-bestand.

Probeer:

background-image: url("../../images/image.png");

Antwoord 5

u kunt ook inline css toevoegen om een ​​afbeelding als achtergrond toe te voegen, zoals in onderstaand voorbeeld

<div class="item active" style="background-image: url(../../foo.png);">

Antwoord 6

De oplossing (http://expressjs.com/en/starter/static-files .html).

eenmaal gedaan, zal de afbeeldingsmap het niet langer plaatsen. alleen zijn

background-image: url (“/ image.png”);

zorg dat de afbeelding al in de statische bestanden staat

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Other episodes