为什么我的精灵图像破碎[x]，但也显示显示图像？

我不知道为什么，但图像实际显示，但它有一个[x]的顶部，就好像它是一个断开的链接？该页面可浏览：www.klassaktkreations.com为什么我的精灵图像破碎[x]，但也显示显示图像？

的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 = '[email protected]'; 
    $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; 
    }

来源

2012-03-27 AndroidNewb

'tags？ 1993年是什么？ :-P – 2012-03-27 20:29:18

的确，您已经标记了此HTML5，并且

标记已从该规范中删除。 – 2012-03-27 20:33:06

上帝的母亲... – Mathletics 2012-03-27 20:33:32

你给你的img标签的背景图像。

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

来源

2012-03-27 20:28:52

好吧我改变它只是：

但它仍然有一个边框，我没有指定。 – AndroidNewb 2012-03-27 20:45:05

@AndroidNewb：不要使用'img'标签。尝试一个'div'代替。 – 2012-03-27 20:47:37

它工作！谢谢，我使用了div标签而不是使用图片标签。还有一个问题，似乎其他开发者正在使用

标签取笑我，我没有看到与此相当的HTML5，现在是如何完成的？ – AndroidNewb 2012-03-27 20:54:51

你有一个破碎的链接在这里：

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

来源

2012-03-27 20:28:51 kamalo

好吧我改变它只是：

但它仍然有一个边框，我没有指定。 – AndroidNewb 2012-03-27 20:45:39

加边框：0; .home – kamalo 2012-03-27 20:47:16

试过这个，但看起来Rocket是正确的，使用div标签而不是img标签工作！ – AndroidNewb 2012-03-27 20:53:43

为什么我的精灵图像破碎[x]，但也显示显示图像？

回答

相关问题