Question

我不知道为什么，但是图像实际显示但是它上面有一个[x]，好像它是一个断开的链接？该页面可在以下网址查看：www.klassaktkreations.com

的index.php

<!DOCTYPE HTML>
<html>
<link rel="stylesheet" type="text/css"
 media="screen" href="style.css">

<?php
    $name = $_POST['name'];
    $email = $_POST['email'];
    $message = $_POST['message'];
    $from = 'From: My Website'; 
    $to = 'info@yahoo.com.com'; 
    $subject = 'Website Inquiry';

    $body = "From: $name\n E-Mail: $email\n Message:\n $message";

if ($_POST['submit']) {
    if ($name != '' && $email != '' && $message != '') {
            if (mail ($to, $subject, $body, $from)) {
            echo '<p>Your message has been sent!</p>';
        } else { 
            echo '<p>Something went wrong, go back and try again!</p>'; 
        }
    } else {
        echo '<p>You need to fill in all required fields!!</p>';
    }
}
?>

<head bgcolor="Black">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>My Website Title</title>
</head>

<body bgcolor="Black">

    <header class="body">                          
 <center><img class="home" src="sprite2.png" width="1" height="1"/></center>
    </header>

    <section class="body">
<form method="post" action="">

    <label><strong>Name</strong></label>
    <input type="text" name="name" placeholder="Type Here">

    <label><strong>Email</strong></label>
    <input name="email" type="email" placeholder="Type Here">

    <label><strong>Message</strong></label>
    <textarea name="message" placeholder="Type Here"></textarea>  
    <input id="submit" name="submit" type="submit" value="Submit">

</form>
    </section>

    <footer class="body">
    </footer>

</body>

</html>

style.css - 您会注意到我使用的精灵只有3张图片，用于提交按钮和标题图片。

body {color:white;}

label {
    display:block;
    margin-top:20px;
    letter-spacing:2px;
}

img.home
{
width:230px;
height:119px;
background:url(http://www.klassaktkreations.com/images/sprite2.png) 0px 0px;

}

/* Centre the page */
.body {
    display:block;
    margin:0 auto;
    width:576px;
    background-color:black;
}

/* Centre the form within the page */
form {
    margin:0 auto;
    width:459px;
}

/* Style the text boxes */
input, textarea {
    border:1px solid #97d6eb;
    width:439px;
    height:27px;
    background:#444243;
    border:1px solid #dedede;
    padding:10px;
    margin-top:3px;
    font-size:0.9em;
    /*color:#3a3a3a;*/
    color:#ffffff;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
}

textarea {
    height:213px;
}

#submit {
    width:146px;
    height:50px;
    background-image: url(http://www.klassaktkreations.com/images/sprite2.png);
    background-position: 0px -129px;
    text-indent:-9999px;
    border:none;
    margin-top:20px;
    cursor:pointer;
}
    #submit:hover {
     background-image: url(http://www.klassaktkreations.com/images/sprite2.png);
    background-position: 0px -189px;
    }

Answer 1

你给你的img标签一个背景图片。

图片标记的src未加载（因此，[x]），并且背景正在加载（因此图像）。

Answer 2

这里有一个断开的链接：

<center><img class="home" src="sprite2.png" width="1" height="1"/></center>

为什么我的精灵图像会被破坏[x]而且还会显示图像？

2 个答案: