Wat is het juiste gebruik van de CSS background-image eigenschap?
De belangrijkste dingen die ik probeer te begrijpen is
- Moet het tussen aanhalingstekens staan, bijvoorbeeld:
background-image: url('images/slides/background.jpg'); - Kan het een relatief pad zijn (zoals hierboven) of moet het een volledige URL zijn?
- Andere punten waar ik op moet letten om ervoor te zorgen dat het correct werkt in browsers die aan de standaarden voldoen.
Antwoord 1, autoriteit 100%
Het pad kan vol of relatief zijn (als de afbeelding van een ander domein is, moet deze natuurlijk vol zijn).
U hoeft geen aanhalingstekens te gebruiken in de URI; de syntaxis kan zijn:
background-image: url(image.jpg);
Of
background-image: url("image.jpg");
Echter, van W3:
Sommige tekens die in een URI zonder aanhalingstekens voorkomen, zoals haakjes, witruimtetekens, enkele aanhalingstekens (‘) en dubbele aanhalingstekens (“), moeten worden geëscaped met een backslash zodat de resulterende URI-waarde een URI-token is: ‘\ (‘, ‘\)’.
Dus in dergelijke gevallen is het ofwel nodig om aanhalingstekens of dubbele aanhalingstekens te gebruiken, of om de tekens te escapen.
Antwoord 2, autoriteit 30%
-
Nee, je hebt geen aanhalingstekens nodig.
-
Ja, dat kan. Houd er echter rekening mee dat relatieve URL’s worden afgeleid uit de URL van uw stylesheet.
-
Gebruik geen aanhalingstekens. Ik denk dat er klanten zijn die ze niet begrijpen.
Antwoord 3, autoriteit 21%
1) aanhalingstekens plaatsen is een goede gewoonte
2) het kan een relatief pad zijn, bijvoorbeeld:
background-image: url('images/slides/background.jpg');
zoekt naar de map afbeeldingen in de map waaruit css is geladen. Dus als afbeeldingen zich in een andere map of buiten de CSS-mapstructuur bevinden, moet u het absolute pad of relatief ten opzichte van het hoofdpad gebruiken (beginnend met /)
3) u moet een volledige declaratie voor de achtergrondafbeelding gebruiken om ervoor te zorgen dat deze zich consistent gedraagt in browsers die aan de standaarden voldoen, zoals:
background:blue url('/images/clouds.jpg') no-repeat scroll left center;
Antwoord 4, autoriteit 3%
Relatieve paden zijn prima en aanhalingstekens zijn niet nodig. Een ander ding dat kan helpen is om de “shorthand” backgroundeigenschap te gebruiken om een achtergrondkleur op te geven voor het geval de afbeelding niet laadt of om de een of andere reden niet beschikbaar is.
#elementID {
background: #000 url(images/slides/background.jpg) repeat-x top left;
}
Merk ook op dat je kunt specificeren of de afbeelding wordt herhaald en in welke richting (als je dit niet opgeeft, is de standaardinstelling om horizontaal en verticaal te herhalen), en ook de locatie van de afbeelding ten opzichte van de container.
p>
Antwoord 5, autoriteit 3%
Als uw afbeeldingen zich in een aparte map van uw css-bestand bevinden en u wilt dat het relatieve pad begint bij de hoofdmap van uw website:
background-image: url('/Images/bgi.png');
Antwoord 6
controleer gewoon de directorystructuur waar de afbeelding precies staat. Stel dat je een css-map hebt en een afbeeldingenmap buiten de css-map, dan zul je “../images/image.jpg” moeten gebruiken.
en het zal werken zoals het voor mij deed, zorg er gewoon voor dat de directorystructuur.
Antwoord 7
schrijf gewoon in je css-bestand zoals hieronder
background:url("images/logo.jpg")
Antwoord 8
je hebt echt geen aanhalingstekens nodig, laat ons zeggen dat je de afbeelding uit je css-bestand gebruikt.
{background-image: url(your image.png/jpg etc);}
Antwoord 9
U hoeft geen aanhalingstekens te gebruiken en u kunt elk gewenst pad gebruiken!
Antwoord 10
Bekijk de respectievelijke sitepoint-referentiepagina’s voor background-imageen URI’s
- Het hoeft niet tussen aanhalingstekens te staan, maar je kunt ze gebruiken als je wilt. (Ik denk dat IE5/Mac geen enkele aanhalingstekens ondersteunt).
- Zowel relatief als absoluut is mogelijk; een relatief pad is relatief aan het pad van het css-bestand.