Question

我使用免费模板创建了一个简单的网站。我很困惑，因为我的版本上的图像没有显示，但演示版本上的图像正在工作，两者都有完全相同的CSS文件和HTML，因为我复制粘贴。我将在下面发布。我的困惑在于我没有看到html或css样式表中提到的任何图像。样式是为图像，但没有链接到文件位置。 2个问题。

这就是网站的样子：

http://www.quackit.com/html/templates/download/bryantsmith/greenmountain/

这就是我的网站的样子：

https://cherry-cupcake-30790.herokuapp.com/

因为你可以看到背景，导航栏的背景和主要图像都缺失了，但其他样式和CSS已经实现。

为什么图片没有显示在我的版本上？
为什么在演示版本上显示图像0似乎没有参考图像的实际文件位置（仅图像的样式）？

感谢。

html文件：

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
<title>NightBeach | florida web design</title>
</head>

<body>
<div id="container">
        <div id="mainpic">
            <h1>Green<span class="off">Mountain</span></h1>
            <h2>A template by Bryant Smith</h2>
        </div>   

        <div id="menu">
            <ul>
                <li class="menuitem"><a href="#">Home</a></li>
                <li class="menuitem"><a href="#">About</a></li>
                <li class="menuitem"><a href="#">Products</a></li>
                <li class="menuitem"><a href="#">Services</a></li>
                <li class="menuitem"><a href="#">Design</a></li>
              <li class="menuitem"><a href="#">Contact</a></li>
            </ul>
        </div>

        <div id="content">
            <h2>You may use this template in any manner you like. All I ask is that you leave the link back to my site at the bottom of the page. </h2>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
          <h3>Template Notes</h3>
            <p>The main image can be changed by either replacing the current image with another one of the same size (900x402), or using a new one of what ever dimensions you'd like.  If you choose the latter, you must open up style.css and change the dimensions of #mainpic, as well as the file name if that is different. If you would like to move the heading around in the above image, find &quot;#mainpic h1&quot; in style.css and modify it's &quot;left&quot; and &quot;top&quot; properties, this is also true for the h2 tag.</p>
            <p>&nbsp;</p>
<h3>More information</h3>
            <p>I decided to leave the content portion open for the templates users to do as they wish with a blank canvas. I don't like to restrict my users too much, and for this reason I leave the defining of any content related styles to you.</p>
            <p>&nbsp;</p>
            <h3>Template Notes</h3>
            <p>The main image can be changed by either replacing the current image with another one of the same size (900x402), or using a new one of what ever dimensions you'd like.  If you choose the latter, you must open up style.css and change the dimensions of #mainpic, as well as the file name if that is different. If you would like to move the heading around in the above image, find &quot;#mainpic h1&quot; in style.css and modify it's &quot;left&quot; and &quot;top&quot; properties, this is also true for the h2 tag.</p>
            <p>&nbsp;</p>
            <h3>More information</h3>
            <p>I decided to leave the content portion open for the templates users to do as they wish with a blank canvas. I don't like to restrict my users too much, and for this reason I leave the defining of any content related styles to you.</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
<p>&nbsp;</p>

            <div id="footer"><h3><a href="http://www.bryantsmith.com">florida web design</a></div>
      </div>
   </div>
</body>
</html>

css文件：

/* A Free Design by Bryant Smith (bryantsmith.com) */



body {
    margin: 0;
    padding: 0;
    text-align: left;
    font: 12px Arial, Helvetica, sans-serif;
    font-size: 13px;
    color: #061C37;
    background: #EEEFE4;
    background-image:url(images/background.png);
    background-repeat:repeat-x;
}
*
{
  margin: 0 auto 0 auto;
 text-align:left;}

#container
{
  display: block; 
  height:auto;
  position: relative; 
  width: 940px;
}

#mainpic h1
{
    position:absolute;
text-align:right;
color:#F8FDEE;
font-size:30px;
color:#FFF; 
left:60px;
top:20px;
}


#mainpic h2
{
position:absolute;
text-align:right;
color:#E1E7F7;  
left:60px;
top:50px;
}

#mainpic
{
background-image:url(images/main.jpg);
background-repeat:no-repeat;
width:900px;
height:354px;   
}



.off
{
color:#3A6028;

}




#menu
{
background-image:url(images/menu.png);
background-repeat:no-repeat;
width:940px;
height:69px;
float:left;
clear:both;
}

#content
{
width:880px;
height:auto;
background-color:#FFF;
padding-left:10px;
padding-right:10px;
padding-bottom:5px;
}

#footer
{
width:inherit;
height:auto;
}

#footer h3 a,#footer h3 a:visited
{
display:inline;
text-align:center;
font-size:12px;
text-decoration:none;
color:#7198E1;
}


#menu ul {
    list-style: none;
    padding: 0px;
    margin-left:auto;
    width:900px;
}

#menu li {
    list-style: none;
    padding: 0px;   
    display: inline; 

}

#menu a {
    float: left;
    width: 150px;
    height: 40px;
    display: block;
    text-align: center;
    text-decoration: none;
    color: #ffffff;
    font-weight: bold;
    padding-top: 17px;
    font-size: 15px;
}

#menu a:hover{
    color:#BEE399;
}

#content p
{

}


html, body {
text-align: center;
}
p {text-align: left;}




  [1]: http://www.quackit.com/html/templates/download/bryantsmith/greenmountain/

Answer 1

问题1，因为你的网站的css是空的，没有任何内容.css链接是https://cherry-cupcake-30790.herokuapp.com/assets/application-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css。

对于问题2，图像链接引用不在html中，而是在css文件中。

#mainpic {
  background-image: url(images/main.jpg);
  background-repeat: no-repeat;
  width: 900px;
  height: 354px;
}

图片链接为http://www.quackit.com/html/templates/download/bryantsmith/greenmountain/images/main.jpg

为什么图像没有显示在我的rails应用程序中？

1 个答案: