你看,每当我试图在CSS或HTML中使用../
时,它似乎都不起作用,它只会给我这个错误:即使我使用了../images/
,GET file:///C:/Users/MYUSERNAME/Desktop/Coin%20Clicker/source/coin.png net::ERR_FILE_NOT_FOUND
。请记住,coin.png
在images
中,而不是在source
中。然而,如果我在javascript中执行此操作,它位于与HTML文件不同的文件中,那么它似乎确实可以工作。知道为什么会发生这种情况吗?这是我的代码:
CSS:
#coin {
background-image: url("../images/coin.png");
border: none;
background-position: center;
background-repeat: no-repeat;
background-size: 200px 200px;
background-color: white;
border-radius: 50%;
width: 200px;
height: 200px;
}
#coin:active {
background-image: url("../images/coin-pressed-in.png");
}
HTML:
<div>
<span id="count">0¢</span>
</div>
<button id="coin" alt="coin" onclick="plusOne()"></button>
<script src="script.js"></script>
javascript:
var dollar = 0;
var cents = 0;
var count = document.getElementById("count");
function plusOne() {
if (cents < 95) {
cents +=5;
count.innerHTML = cents + " ¢";
} else if (cents == 95) {
dollar = 1;
cents = 100;
count.innerHTML = dollar + " $";
} else if (dollar >= 1) {
dollar += 0.05;
count.innerHTML = round(dollar, 2) + " $";
}
}
function round(value, decimals) {
return Number(Math.round(value+'e'+decimals)+'e-'+decimals);
}
document.getElementById("favicon").href = "coin.png";
document.addEventListener("visibilitychange", (event) => {
if (document.visibilityState == "visible") {
document.getElementById("favicon").href = "../images/coin.png";
} else {
document.getElementById("favicon").href = "../images/coin-disabled.png";
}
});
文件目录:
- images/
* coin.png
* coin-disabled.png
* coin-pressed-in.png
- source/
* coin.html
* script.js
这似乎是您的根文件夹(指定为项目原点的文件夹是源文件夹(。filenotfound错误证明了这一点,该错误显示它正在源文件夹中查找图像,而不是图像文件夹。你有几个选择:
将图像文件夹移到源文件夹中将项目文件夹更改为Coin%20Clicker将images文件夹移到源文件夹中,并为html和js创建一个单独的文件夹以保持它们的分离。
标记将是href = "/images/coin.png"
或href = "images/coin.png"
。它将起作用。它将与类似于此url("images/coin.png")
的url标记相同。