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

Question

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

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

Answer 1

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

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

background-image: url(image.jpg);

要么

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

但是,从W3:

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

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

Answer 2

1. 不,你不需要报价.

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

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

Answer 3

1)引用报价是一个好习惯

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

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

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

3)您应该使用完整的背景图像声明,使其在符合标准的浏览器中表现一致,例如:

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

Answer 4

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

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

Answer 5

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

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

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