CSS background-image - 正确的用法是什么？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/851724/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS background-image - What is the correct usage?
提问by Robert MacLean
What is the correct usage of the CSS background-image property? The key things I am trying to understand is
CSS background-image 属性的正确用法是什么？我试图理解的关键是
- Does it need to be in quotes i.e.:
background-image: url('images/slides/background.jpg'); - Can it be a relative path (as above) or must it be a full URL?
- Any other points I should be aware of to make sure it works correctly across standards compliant browsers.
- 它是否需要在引号中，即：
background-image: url('images/slides/background.jpg'); - 它可以是相对路径（如上所述）还是必须是完整的 URL？
- 我应该注意的任何其他要点，以确保它在符合标准的浏览器中正常工作。
回答by Alex Rozanski
The path can either be full or relative (of course if the image is from another domain it must be full).
路径可以是完整的，也可以是相对的（当然，如果图像来自另一个域，它必须是完整的）。
You don't need to use quotes in the URI; the syntax can either be:
您不需要在 URI 中使用引号；语法可以是：
background-image: url(image.jpg);
Or
或者
background-image: url("image.jpg");
However, from W3:
但是，从W3：
Some characters appearing in an unquoted URI, such as parentheses, white space characters, single quotes (') and double quotes ("), must be escaped with a backslash so that the resulting URI value is a URI token: '\(', '\)'.
出现在未加引号的 URI 中的某些字符，例如括号、空格字符、单引号 (') 和双引号 (")，必须使用反斜杠进行转义，以便生成的 URI 值是一个 URI 标记：'\(', '\)'。
So in instances such as these it is either necessary to use quotes or double quotes, or escape the characters.
因此，在此类情况下，要么需要使用引号或双引号，要么对字符进行转义。
回答by Gumbo
No you don't need quotes.
Yes you can. But note that relative URLs are resolved from the URL of your stylesheet.
Better don't use quotes. I think there are clients that don't understand them.
不，你不需要引号。
是的你可以。但请注意，相对 URL 是从样式表的 URL 解析的。
最好不要使用引号。我认为有些客户不理解他们。
回答by TheVillageIdiot
1) putting quotes is a good habit
1）引用是一个好习惯
2) it can be relative path for example:
2）它可以是相对路径，例如：
background-image: url('images/slides/background.jpg');
will look for images folder in the folder from which css is loaded. So if images are in another folder or out of the CSS folder tree you should use absolute path or relative to the root path (starting with /)
将在加载 css 的文件夹中查找图像文件夹。因此，如果图像位于另一个文件夹中或不在 CSS 文件夹树中，则应使用绝对路径或相对于根路径（以 / 开头）
3) you should use complete declaration for background-image to make it behave consistently across standards compliant browsers like:
3) 您应该对背景图像使用完整声明，以使其在符合标准的浏览器中表现一致，例如：
background:blue url('/images/clouds.jpg') no-repeat scroll left center;
回答by Bryan
Relative paths are fine and quotes aren't necessary. Another thing that can help is to use the "shorthand" backgroundproperty to specify a background color in case the image doesn't load or isn't available for some reason.
相对路径很好，不需要引号。另一件有用的事情是使用“速记”background属性来指定背景颜色，以防图像因某种原因无法加载或不可用。
#elementID {
background: #000 url(images/slides/background.jpg) repeat-x top left;
}
Notice also that you can specify whether the image will repeat and in what direction (if you don't specify, the default is to repeat horizontally and vertically), and also the location of the image relative to its container.
另请注意，您可以指定图像是否重复以及在哪个方向（如果您未指定，默认为水平和垂直重复），以及图像相对于其容器的位置。
回答by Amin Saqi
If your images are in a separate directory of your css file and you want the relative path begins from the root of your web site:
如果您的图像位于 css 文件的单独目录中，并且您希望相对路径从网站的根目录开始：
background-image: url('/Images/bgi.png');
回答by sunny
just check the directory structure where exactly image is suppose you have a css folder and images folder outside css folder then you will have to use"../images/image.jpg" and it will work as it did for me just make sure the directory stucture.
只需检查图像所在的目录结构，假设您在 css 文件夹外有一个 css 文件夹和图像文件夹，那么您将不得不使用“../images/image.jpg”，它会像对我一样工作，只需确保目录结构。
回答by Athini Watu
you really don't need quotes if let say use are using the image from your css file it can be
如果让说使用使用来自您的 css 文件的图像，您真的不需要引号
{background-image: url(your image.png/jpg etc);}
回答by Ben
Have a look at the respective sitepoint reference pages for background-imageand URIs
- It does not have to be in quotes but can use them if you like. (I think IE5/Mac does not support single quotes).
- Both relative and absolute is possible; a relative path is relative to the path of the css file.
- 它不必在引号中，但如果您愿意，可以使用它们。（我认为 IE5/Mac 不支持单引号）。
- 相对和绝对都是可能的；相对路径是相对于 css 文件的路径。
回答by BERGUIGA Mohamed Amine
just write in your css file like bellow
只需像下面这样写在你的css文件中
background:url("images/logo.jpg")
回答by Rigobert Song
You don't need to use quotes and you can use any path you like!
您不需要使用引号，您可以使用任何您喜欢的路径！
