Cum să referențiezi o imagine din temă într-o foaie de stil?

Question

Cum să referențiezi o imagine din temă într-o foaie de stil?

19 mai 2015, 08:25:43

Vizualizări: 46.2K

Voturi: 7

Am un element global ca parte a temei mele și trebuie să referențiez o imagine ca imagine de fundal. Am nevoie de URL-ul către imagine. Presupun că este o practică nerecomandata să codific URL-ul direct și că URL-ul trebuie să fie relativ la locația temei. Care este metoda recomandată pentru referențierea unei imagini într-o foaie de stil?

Andrew

419

imagini css url uri

Comentarii

Unde se află locația imaginii sau trebuie încărcată?

m4n0

19 mai 2015 08:28:21

Toate răspunsurile la întrebare

Comentarii

Nu funcționează pentru mine, am aceeași structură

Hidayt Rahman

9 ian. 2018 17:40:43

@HidaytRahman Ai un demo pentru asta?

m4n0

9 ian. 2018 18:00:08

Da, funcționează, nu mergea din cauza unei greșeli mărunte, mulțumesc :)

Hidayt Rahman

10 ian. 2018 17:50:52

Care ar putea fi acea greșeală nevinovată? ;)

m4n0

10 ian. 2018 19:21:51

Am avut spațiu alb în numele imaginii pe care o inseram :(

Hidayt Rahman

11 ian. 2018 15:01:39

Am avut o problemă cu relativitatea URL-ului. Mă refer la situația în care deschid o categorie dintr-o categorie copil de nivelul trei sau mai adânc, ca în exemplul următor:

-natură
--animale
---lupi >>> nivelul 3
--păsări

URL-ul pentru categoria lupi ar deveni: /category/natură/animale/lupi/ Prin urmare, locația imaginii este cu un nivel mai sus în director și imaginea nu se afișează.

Așa că am încercat următoarea soluție și a funcționat:

.sidebar-row .widget {
  background-image: url("../../../../wp-content/uploads/.../image.webp");
  background-image: url("../../../../../wp-content/uploads/.../image.webp");
  background-image: url("../../../../../../wp-content/uploads/.../image.webp");
}

Imaginile din locații incorecte vor fi ignorate, iar cea din locația corectă va apărea.

Apropo: Folosesc plugin-ul "Simple CSS" pentru a personaliza aspectul site-ului meu.

Frank Belin

11

25 aug. 2021 01:31:06

Comentarii

Deși aceasta este o soluție elegantă, browserul tău va trebui să facă până la trei cereri pentru imagine până când va descoperi cea corectă. Aș prefera o altă metodă de a rezolva această problemă.

Rup

27 aug. 2021 11:11:21

Pentru WordPress, ar trebui să arate cam așa:

   background:url('../wp-content/themes/yourtheme/images/social-icons-v2-opt.png');

Pentru Tema Copil

   background:url('../wp-content/themes/yourtheme-child/images/social-icons-v2-opt.png');

Michael C.

1

17 aug. 2020 02:25:31

Comentarii

Directoarele wp-content și themes pot fi redenumite. NU folosiți aceste nume în codul vostru.

fuxia

17 aug. 2020 04:19:25

Mulțumesc pentru avertizare! Da, acesta nu este exact codul. De aceea am menționat "Este ceva de genul acesta".

Michael C.

18 aug. 2020 05:30:22

m4n0 1.36K · Accepted Answer · 2015-05-19T08:42:47Z

Depinde de locația imaginii și a fișierului de stiluri.

Dar aceasta este sintaxa:

.theme-image {
  background-image: url('../images/header-img.jpg');
}

Codul de mai sus este pentru structura:

wp-content
 - themes
  - your-theme 
    - images
     - header-img.jpg
    - css
     - style.css

Faci browserul să meargă cu un nivel mai sus în director și să caute directorul images.

m4n0

1.36K

19 mai 2015 08:42:47