CSS background-image - 正确的用法是什么?

时间:2009-05-12 08:25:58

标签: css

CSS background-image属性的正确用法是什么? 我想要了解的关键事项是

  1. 是否需要引号,即:background-image: url('images/slides/background.jpg');
  2. 它可以是相对路径(如上所述)还是必须是完整的URL?
  3. 我应该注意的任何其他要点,以确保它在符合标准的浏览器中正常工作。

10 个答案:

答案 0 :(得分:145)

路径可以是完整的也可以是相对的(当然,如果图像来自另一个域,它必须是满的。)

您不需要在URI中使用引号;语法可以是:

background-image: url(image.jpg);

或者

background-image: url("image.jpg");

但是,来自W3

  

出现在不带引号的URI中的某些字符(如括号,空格字符,单引号(')和双引号(“))必须使用反斜杠进行转义,以便生成的URI值为URI标记:'\ (','\)'。

因此,在诸如此类的实例中,要么使用引号或双引号,要么转义字符。

答案 1 :(得分:47)

  1. 不,你不需要引号。

  2. 是的,你可以。但请注意,相对URL是从样式表的URL中解析的。

  3. 最好不要使用引号。我认为有些客户不理解他们。

答案 2 :(得分:26)

1)报价是一个好习惯

2)它可以是相对路径,例如:

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

将在加载css的文件夹中查找images文件夹。因此,如果图像在另一个文件夹中或在CSS文件夹树之外,则应使用绝对路径或相对于根路径(以/开头)

3)您应该对background-image使用完整声明,以使其在符合标准的浏览器中表现一致:

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

答案 3 :(得分:5)

相对路径很好,报价不是必需的。另一件可以帮助的事情是使用“速记”background属性来指定背景颜色,以防图像无法加载或由于某种原因不可用。

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

另请注意,您可以指定图像是否重复以及在何种方向(如果未指定,默认为水平和垂直重复),以及图像相对于其容器的位置。

答案 4 :(得分:4)

如果您的图片位于css文件的单独目录中,并且您希望相对路径从网站的根目录开始:

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

答案 5 :(得分:1)

只需检查目录结构,确切地说图像是css文件夹和css文件夹外的图像文件夹,然后你必须使用" ../ images / image.jpg" 它会像我一样工作,只需确保目录结构。

答案 6 :(得分:1)

如果让我们说你正在使用css文件中的图像,那么你真的不需要引用

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

答案 7 :(得分:0)

您不需要使用引号,您可以使用任何您喜欢的路径!

答案 8 :(得分:0)

查看background-imageURIs

的相应站点参考页面
  1. 它不必是引号,但如果你愿意,可以使用它们。 (我认为IE5 / Mac不支持单引号)。
  2. 相对和绝对都是可能的;相对路径相对于css文件的路径。

答案 9 :(得分:0)

只需写下你的css文件,如下文

background:url("images/logo.jpg")