为什么background-img:url( )不可以是绝对路径，而<img src=" ">中可以是绝对路径

Question

<img src=" http://image.dydata.io/YQqzz7AY5kTURfaHHemW4f.jpg"> 

这样做完全没有问题，图片可以正常显示，
但是，如果是在一个div上设置 background-image: url( 其他网站的图片路径 ) ，则无法正常显示，官方文档上说css background-image:url() 里面只能是相对路径，请问一下背后的机制是什么样的？求大神解答~

Answer 1

background-image:url() 里面是可以写绝对路径的，可能是你没有给div高宽。

Answer 2

刚刚验证过了，肯定是可以的，

html部分:<div id="ddd" style="width:100%;height: 159px;"></div>
js部分：var src ="http://image.dydata.io/YQqzz7AY5kTURfaHHemW4f.jpg";
$("#div").css('background', "url("+src+") center center no-repeat");

Answer 3

是可以的。
你怎么判断的无法正常显示？network里加载了背景图了吗？div有高度吗？

Answer 4

元素没设置宽高

Answer 5

都可以写相对或者绝对路径。

Answer 6

可以的 记得设置元素宽高 和 background-size

Answer 7

……这个属性就叫url你说它不支持URL？Excuse me？
看了下MDN上，写的是可以用相对地址，下边的例子好几个都是直接用URL的。
看到题主提了下“其他网站”，如果对方没有做防盗链的话，那么最有可能的就是这个<div>有问题。

Answer 8

你这个问题是因为<img>标签本身是元素，其默认大小由内容（也就是图片大小）决定。
而如果你把图片作为<div>的背景，背景大小并不属于元素内容区的部分，所以由于你没定义div标签的高度，而且div标签中没有任何内容，所以div标签的默认高度为0，你也就看不到div的背景图了。

Answer 9

还有这种操作？？？不管是绝对路径还是相对路径都是可以的，背景图的渲染是根据你div的大小进行渲染的，高度为0当然就什么都看不到啦！

Answer 10

background是一个元素的属性，那个元素都没有显示出来，背景当然没有啊。img标签是一个独立的元素，它自己有宽高，那个元素的宽高会被img撑大

Answer 11

如果不可以，你让静态资源走cdn的公司哭死？？

Answer 12

看一发官方文档，
绝对路径和相对路径都可以的，你看下是不是 CSS出错了，没用给 div加 style

Answer 13

首先 img background 中的src都是接受绝对路径的。要注意的是background中你设置url后要给对应的元素设置宽高才会出现图片

Answer 14

这不都可以的嘛.....

Answer 15

可能是没有显示出来把？

Answer 16

可以用绝对路径 只不过是路径错了 因为你根目录可能不是你那个项目文件夹 你的根路径是http://127.0.0.1:8020 不是你当前的这个总文件目录 清楚没