html - CSS url() 路径在网络服务器时有效，但在本地文件时无效？

Question

我正在尝试 CSS 的 shape-outside:

shape-outside: url(image_file.png)

示例:https://jsfiddle.net/quzaorg0/3/

但是，如果我在本地计算机上尝试这个示例(并且使用与 pikachu300.png 一样的路径用于 HTML 和 CSS)，并在 Google Chrome 或 Firefox 中打开 HTML 文件，使用文件系统，那么它就不会将文本环绕在图像周围。

我必须启动一个本地网络服务器(任何本地网络服务器，或者简单地使用 ruby -run -e httpd . -p 8080)，这样 CSS 就能够获取该图像并将文字环绕在图片周围。

HTML 和 CSS 有正确的 URL 路径，也就是文件名:

CSS:

#intro-img { float: left; shape-outside: url(pikachu300.png); }

HTML:

<img id="intro-img" src="pikachu300.png">

因此 HTML 可以加载图像，但 CSS 无法加载该图像。它必须由本地网络服务器提供服务。

我也试过

#intro-img { float: left; shape-outside: url(file://pikachu300.png); }

它也没有用。为什么该路径适用于 HTML 但不适用于 CSS，如果将其作为本地文件进行测试，如何使其适用？

附言在 Developer Console 的 Network 选项卡中，无法第二次加载该文件。如果我运行一个网络服务器，文件可以加载两次:

Answer 1

我今天在自己的元素中遇到了这个问题。

这种行为是一种特质，与通过 FTP 与 HTTP 的文件权限有关。解决方案是运行本地 http 服务器，而不是在本地工作时使用 file:///。只有在 HTTP 下，浏览器才有读取像素透明度的权限。

(@V.Volkov 对原始帖子的评论给出了解决方案，但我想我会发布答案，这样 future 的用户就不必像我一样挖掘评论。)