我正在尝试CSS的shape-outside

shape-outside: url(image_file.png)


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

但是,如果我在本地计算机上尝试了此示例(并将路径用作HTML和CSS的pikachu300.png),并使用文件系统在Google Chrome或Firefox中打开了HTML文件,则该文件不会自动换行图片周围的文字。

我必须启动本地Web服务器(任何本地Web服务器,或仅通过使用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无法加载该图像。它必须由本地Web服务器提供服务。

我也尝试过

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


而且也不起作用。为什么该路径适用于HTML,但不适用于CSS,以及如果将其作为本地文件进行测试,如何使它起作用?

附言在开发者控制台的“网络”选项卡中,无法再次加载该文件。如果我运行Web服务器,则可以两次加载文件:

html - 如果它是Web服务器,则CSS url()路径有效,但当它是本地文件时,该路径无效吗?-LMLPHP

最佳答案

使用url()指向本地文件时,如果该文件位于同一项目文件夹中,则需要相对于CSS所在的位置进行引用。

background-image: url('./imagename.jpg'); // Image is within the same folder with the CSS
background-image: url('./../imagename.jpg'); // Image is located outside the folder where css is located.
background-image: url('./../image/imagename.jpg'); // Image is located in another folder relative to the css folder.


要检索计算机内部(项目范围之外)文件夹中的图像,可以改用直接路径。右键单击图像->属性->位置以获取图像的路径。确保将路径的\更改为URL上的/。

background-image: url('C:/Users/{user}/Downloads/{imagename}'); // Image is located inside the Downloads folder

08-25 10:46
查看更多