我正在尝试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服务器,则可以两次加载文件:
最佳答案
使用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