CSS 图片在刷新时消失

Question

我有一些非常基本的 HTML 和 CSS，现在我确定我的代码没问题（或者至少在我看来是这样），并且图像加载了在各自的领域。但是我一点击刷新它们就消失了。

我正在使用 Coda 2，它使用 Safari 浏览器进行预览。我的所有代码如下：

<!DOCTYPE html>
<html>
<head>
    <title>Input Images</title>
    <link rel="stylesheet" type="text/css" href="css/input-image.css" />
</head>
</head>
<body>
    <form>
        <input type="text" id="email" />
        <input type="text" id="twitter" />
        <input type="text" id="web" />
    </form>
</body>
</html>

input {
    font-size: 120%;
    color: #5a5854;
    background-color: #f2f2f2;
    border: 1px solid #bdbdbd;
    border-radius: 5px;
    padding: 5px 5px 5px 30px;
    background-repeat: no-repeat;
    background-position: 8px 9px;
    display: block;
    margin-bottom: 10px;}

input:focus, input:hover {
    background-color: #ffffff;
    border: 1px solid #b1e1e4;}
input#email {
    background-image: url("images/email.png");}
input#twitter {
    background-image: url("images/twitter.png");}
input#web {
    background-image: url("images/web.png");}

Answer 1

IDE 处理资产路径的方式一定是有问题。

使用绝对路径（这是正确的方法）应该有效：url("/images/email.png").

CSS 图片在刷新时消失

CSS images vanishing on refresh

html

css

image

coda