CSS background-image属性的正确用法是什么? 我想要了解的关键事项是
background-image: url('images/slides/background.jpg');
答案 0 :(得分:145)
路径可以是完整的也可以是相对的(当然,如果图像来自另一个域,它必须是满的。)
您不需要在URI中使用引号;语法可以是:
background-image: url(image.jpg);
或者
background-image: url("image.jpg");
但是,来自W3:
出现在不带引号的URI中的某些字符(如括号,空格字符,单引号(')和双引号(“))必须使用反斜杠进行转义,以便生成的URI值为URI标记:'\ (','\)'。
因此,在诸如此类的实例中,要么使用引号或双引号,要么转义字符。
答案 1 :(得分:47)
不,你不需要引号。
是的,你可以。但请注意,相对URL是从样式表的URL中解析的。
最好不要使用引号。我认为有些客户不理解他们。
答案 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)
答案 9 :(得分:0)
只需写下你的css文件,如下文
background:url("images/logo.jpg")