Question

所以我有这个图像3 00px by 100px和它的3个图标在一个我想用html和css使用它但我无法访问图像文件夹在我的桌面上，我的文件html的路径是C:\Users\User\Desktop\index1.html。这是html和css的任何帮助，我是新手，所以我有点迷失。

HTML文件

<!DOCTYPE html>
<html>
<head>
<head>
        <link rel= "stylesheet" href="primary2.css">
    </head>
    <body>
        <ul class="button">
            <li class="yellow"></li>
            <li class="purple"></li>
            <li class= "red"></li>
        </ul>


</body>
</html>

primary.css文件

.button{
    list-style: none;
    margin:0;
    padding:0;
}

.button li { 
width:100px;
height:100px;
display:inline-block;
background-color: #000;
margin-right:10px;
}

.button li.info{
    background : url(../sprite.JPEG) no repeat;
}

Answer 1

相对路径../是指父文件夹，即从C:\Users\User\调用时C:\Users\User\Desktop\

要引用与文件位于同一目录中的文件，可以使用相对路径./，或者在大多数情况下，前面的斜杠是不必要的...只需指定文件名即可足以存放在同一文件夹中的文件。

来自../sprite.JPEG的

C:\Users\User\Desktop\引用C:\Users\User\sprite.JPEG，而./sprite.JPEG或sprite.JPEG引用C:\Users\User\Desktop\sprite.JPEG。

另请注意您如何在html .css代码中指定link文件...

我的评论对代码进行了一些模糊处理，因此我将修订版放在CSS中：

.button{
    list-style: none;
    margin:0;
    padding:0;
}

.button li {
    width:100px;
    height:100px;
    display:inline-block;
    background-color: #000;
    margin-right:10px;
}

.button li.yellow {
    background : url(sprite.JPEG) no-repeat;
}

唯一的变化是最后一个样式定义。

用于访问精灵img的css中url的文件夹路径

1 个答案: