blocks|key|340601|text|你不需要使用引号，你可以使用任何你喜欢的路径！|type|unstyled|depth|inlineStyleRanges|entityRanges|data|340602|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

You don't need to use quotes and you can use any path you like!

blocks|key|340607|text|type|unstyled|depth|inlineStyleRanges|entityRanges|data|340608|否您不需要报价。|ordered-list-item|340609|是的，您可以。但请注意，相对URL是从您的stylesheet.|340610|Better的URL解析而来的，不使用引号。我认为有些客户并不了解他们。|340611|340612|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|-4|4|5|6|K|7|@]|8|@]|9|$]]|$1|A|3|B|4|C|6|L|7|@]|8|@]|9|$]]|$1|D|3|E|4|C|6|M|7|@]|8|@]|9|$]]|$1|F|3|G|4|C|6|N|7|@]|8|@]|9|$]]|$1|H|3|-4|4|5|6|O|7|@]|8|@]|9|$]]|$1|I|3|-4|4|5|6|P|7|@]|8|@]|9|$]]]|J|$]]

<ol>
<li>No you don’t need quotes.</li>
<li>Yes you can. But note that relative URLs are resolved from the URL of your stylesheet.</li>
<li>Better don’t use quotes. I think there are clients that don’t understand them.</li>
</ol>

blocks|key|3326503|text|1)加引号是个好习惯|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3326504|2)可以是相对路径，例如：|3326505|background-image:+url('images/slides/background.jpg');|code-block|syntax|javascript|3326506|将在加载css的文件夹中查找图像文件夹。因此，如果图像在另一个文件夹中或在CSS文件夹树之外，则应使用绝对路径或相对于根路径的相对路径(以/开头)|3326507|3)你应该对background-image使用完整的声明，以使其在符合标准的浏览器中保持一致，例如：|3326508|background:blue+url('/images/clouds.jpg')+no-repeat+scroll+left+center;|3326509|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|T|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|U|8|@]|9|@]|A|$]]|$1|M|3|N|5|F|7|V|8|@]|9|@]|A|$G|H]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

1) putting quotes is a good habit

2) it can be relative path for example:

<pre><code>background-image: url('images/slides/background.jpg');
</code></pre>

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 /)

3) you should use complete declaration for background-image to make it behave consistently across standards compliant browsers like:

<pre><code>background:blue url('/images/clouds.jpg') no-repeat scroll left center;
</code></pre>

blocks|key|3326608|text|路径可以是完整的，也可以是相对的(当然，如果图像来自另一个域，则它必须是完整的)。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3326609|您不需要在URI中使用引号；语法可以是：|3326610|background-image:+url(image.jpg);|code-block|syntax|javascript|3326611|或|3326612|background-image:+url("image.jpg");|3326613|但是，来自W3的|offset|length|3326614|3326615|出现在未加引号的URI中的一些字符，如圆括号、空格字符、单引号(')和双引号(")，必须使用反斜杠进行转义，以便生成的URI值是URI标记：'('，')‘。|blockquote|3326616|3326617|3326618|因此，在这样的情况下，必须使用引号或双引号，或者对字符进行转义。|3326619|entityMap|0|LINK|mutability|MUTABLE|url|http://www.w3.org/TR/CSS2/syndata.html#value-def-uri^0|0|0|0|0|0|5|2|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|16|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|17|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|18|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|19|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|1A|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|1B|8|@]|9|@$O|1C|P|1D|1|1E]]|A|$]]|$1|Q|3|-4|5|6|7|1F|8|@]|9|@]|A|$]]|$1|R|3|S|5|T|7|1G|8|@]|9|@]|A|$]]|$1|U|3|-4|5|6|7|1H|8|@]|9|@]|A|$]]|$1|V|3|-4|5|6|7|1I|8|@]|9|@]|A|$]]|$1|W|3|X|5|6|7|1J|8|@]|9|@]|A|$]]|$1|Y|3|-4|5|6|7|1K|8|@]|9|@]|A|$]]]|Z|$10|$5|11|12|13|A|$14|15]]]]

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:

<pre><code>background-image: url(image.jpg);
</code></pre>

Or

<pre><code>background-image: url("image.jpg");
</code></pre>

However, from <a href="http://www.w3.org/TR/CSS2/syndata.html#value-def-uri" rel="noreferrer">W3</a>:

<blockquote>
 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: '$', '$'.
</blockquote>

So in instances such as these it is either necessary to use quotes or double quotes, or escape the characters.

blocks|key|3113703|text|看看background-image和URIs各自的站点点参考页面|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|3113704|3113705|它不一定要用引号，但如果你喜欢，你可以用引号。(我认为IE5/Mac不支持单引号)。|ordered-list-item|3113706|既可以是相对路径，也可以是绝对路径；相对路径是相对于css文件的路径。|3113707|3113708|entityMap|0|LINK|mutability|MUTABLE|url|http://reference.sitepoint.com/css/background-image|1|http://reference.sitepoint.com/css/uris^0|2|G|0|J|4|1|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@$A|V|B|W|1|X]|$A|Y|B|Z|1|10]]|C|$]]|$1|D|3|-4|5|6|7|11|8|@]|9|@]|C|$]]|$1|E|3|F|5|G|7|12|8|@]|9|@]|C|$]]|$1|H|3|I|5|G|7|13|8|@]|9|@]|C|$]]|$1|J|3|-4|5|6|7|14|8|@]|9|@]|C|$]]|$1|K|3|-4|5|6|7|15|8|@]|9|@]|C|$]]]|L|$M|$5|N|O|P|C|$Q|R]]|S|$5|N|O|P|C|$Q|T]]]]

Have a look at the respective sitepoint reference pages for <a href="http://reference.sitepoint.com/css/background-image" rel="nofollow noreferrer">background-image</a> and <a href="http://reference.sitepoint.com/css/uris" rel="nofollow noreferrer">URIs</a> 

<ol>
<li>It does not have to be in quotes but can use them if you like. (I think IE5/Mac does not support single quotes).</li>
<li>Both relative and absolute is possible; a relative path is relative to the path of the css file.</li>
</ol>

blocks|key|342044|text|相对路径很好，不需要引号。另一件有用的事情是使用“速记”background属性来指定背景颜色，以防图像无法加载或由于某种原因不可用。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|342045|#elementID+{
++++background:+#000+url(images/slides/background.jpg)+repeat-x+top+left;
}|code-block|syntax|javascript|342046|另请注意，您可以指定图像是否将重复以及在哪个方向上重复(如果不指定，则默认为水平和垂直重复)，以及图像相对于其容器的位置。|342047|entityMap^0|S|A|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|S|8|@]|D|@]|E|$]]|$1|M|3|-4|5|6|7|T|8|@]|D|@]|E|$]]]|N|$]]

Relative paths are fine and quotes aren't necessary. Another thing that can help is to use the "shorthand" <code>background</code> property to specify a background color in case the image doesn't load or isn't available for some reason.

<pre><code>#elementID {
 background: #000 url(images/slides/background.jpg) repeat-x top left;
}
</code></pre>

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.

blocks|key|3113765|text|如果您的图像位于css文件的单独目录中，并且您希望相对路径从网站的根目录开始：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3113766|background-image:+url('/Images/bgi.png');|code-block|syntax|javascript|3113767|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

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:

<pre><code>background-image: url('/Images/bgi.png');
</code></pre>

blocks|key|342931|text|只需检查目录结构，其中确切的图像是假设你有一个css文件夹和图像文件夹在css文件夹外，然后你将不得不使用“../+images+/image.jpg”，它会像我做的那样工作，只需确保目录结构。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|342932|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

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.

blocks|key|340742|text|只需像下面这样在你的css文件中写|type|unstyled|depth|inlineStyleRanges|entityRanges|data|340743|background:url("images/logo.jpg")|code-block|syntax|javascript|340744|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

just write in your css file like bellow

<pre><code>background:url("images/logo.jpg")
</code></pre>

blocks|key|342937|text|如果use使用的是css文件中的图像，那么您真的不需要引号|type|unstyled|depth|inlineStyleRanges|entityRanges|data|342938|{background-image:+url(your+image.png/jpg+etc);}|code-block|syntax|javascript|342939|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

you really don't need quotes if let say use are using the image from your css file it can be 

<pre><code>{background-image: url(your image.png/jpg etc);}
</code></pre>

What is the correct usage of the CSS background-image property?
The key things I am trying to understand is

<ol>
<li>Does it need to be in quotes i.e.: <code>background-image: url('images/slides/background.jpg');</code></li>
<li>Can it be a relative path (as above) or must it be a full URL?</li>
<li>Any other points I should be aware of to make sure it works correctly across standards compliant browsers.</li>
</ol>

CSS background-image - What is the correct usage?

容器

CSS背景图像属性的正确用法是什么？我想要理解的关键事情是是否需要用引号括起来，即：background-image: url('images/slides/background.jpg');Can it是一个相对路径(如上所述)，还是必须是一个完整的URL？为了确保它能在符合标准的浏览器上正常工作，我需要注意任何其他...

问CSS的背景-图像-正确的用法是什么？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS的背景-图像-正确的用法是什么？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS的背景-图像-正确的用法是什么？
EN