Question

我的设置如下。

1）CSS文件（下面的代码）位于Stylesheets目录

中

2）HTML与Stylesheets文件夹

位于同一级别

3）图像文件夹与Stylesheets

位于同一级别

以上所有三个元素2个文件夹，1个html位于本地目录的同一级别。

问题

如何获取驻留在Images目录中的本地文件的图像网址，最好使用不带双点的路径？

span.check
    width: 14px
    height: 14px
    border: 2px solid black
    display: inline
    position: absolute
    top: $spacing
    content: url(Images\icon_check@2x.png)
    background-size: 14px 14px
    background-repeat: no-repeat

编辑工作CSS - Sass

span.check
        width: 14px
        height: 14px
        border: 2px solid black
        display: inline
        position: absolute
        top: $spacing
        z-index: 1
        background-image: url('../Icons/icon_check@2x.png')
        background-size: 14px 14px
        background-repeat: no-repeat

Answer 1

您的图片不会显示，因为内容属性适用于:before和:after伪元素。您可能还会发现使用背景图像可以为调整大小等提供更大的灵活性。更多here on CSS-Tricks。

图像的路径可以通过下载目录（不确定为什么要避免这种情况）或者从根目录的相对路径的前导斜杠来完成。

Answer 2

您可以使用

轻松获取图像

background-image: url('Images/icon_check@2x.png');

你可以自己检查：）

CSS - 如何根据本地图像URL为span分配设置的背景图像？

2 个答案: