Question

请注意，我是HTML新手，对CSS几乎一无所知。

我为我网站的推荐页面下载了HTML/CSS个文件。

到目前为止，我已经从CSS中删除了灰色背景颜色而没有任何问题。但是，当我想更改此人的默认图像时

<img src="img/photo.jpg" alt="" class="photo" />

到我在网站其他部分使用的测试图像（文件目录是正确的）

<img src="Images/portfolioimage2.png" alt="" class="photo" />

结果删除了默认人物图像，但未插入我的图像。

我几乎可能是问题在CSS中，因为我使用相同的图像将代码从不同的页面粘贴到下载附带的HTML页面上;即使具有相同代码行的相同图像加载到没有附加CSS的另一个网页上，图像仍然无法加载。

我同时使用上面链接的下载附带的默认CSS和HTML文件。我唯一改变的是我从CSS中删除了背景颜色，我在HTML中更改了1行，如上所示。

感谢任何帮助。

按要求提供CSS：

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, 
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {margin:0;padding:0;border:0;font-      size:100%;font:inherit;vertical-align: baseline;}
 /* HTML5 display-role reset for older browsers */
 article, aside, details, figcaption, figure, 
 footer, header, hgroup, menu, nav, section {display: block;}
 body {line-height: 1;}
 ol, ul {list-style: none;list-style-position:outside;}
 blockquote, q {quotes: none;}
 blockquote:before, blockquote:after,
 q:before, q:after {content: '';content: none;}
 table {border-collapse: collapse;border-spacing:0;}

 body{font-family:Georgia,sans-serif;font-size:15px;}
 #block{width:506px;padding:230px 6px 0 6px;margin:0 auto;}
 #block h3{background:url(img/h3.png) no-repeat center;color:#dd3c04;font-     size:13px;font-weight:normal;text-align:center;text-transform:uppercase;margin-bottom:17px;}
 #block .photo{background:url(img/photo-bg.png) no-repeat center;margin-    right:6px;position:relative;float:left;}
 #block .photo img{max-width:115px;max-  height:115px;overflow:hidden;position:absolute;}
 #block .photo img.photo-bg{z-index:1;}
 #block .photo img.photo{left:0;}
 #block p.content{font-style:italic;line-height:24px;padding-  left:19px;margin-left:121px;position:relative;overflow:hidden;}
 #block p.content span {text-indent;}
 #block p.content span.laquo{background:url(img/laquo.png) no-repeat;width:14px;height:11px;position:absolute;left:0;top:4px;display:block;}
 #block p.content span.raquo{background:url(img/raquo.png) no-repeat right 4px;width:13px;height:15px;padding-left:4px;display:inline-block;}
 #block .sign{text-align:right;float:right;}
 #block .sign a{color:#577302;font-family:Arial,sans-serif;font-size:13px;text-decoration:none;}
 #block .sign a:hover{text-decoration:underline;}
 #block .sign p{color:#5a5a5a;font-size:12px;line-height:15px;margin-top:6px;}

HTML：

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html>
 <head>
<link rel="stylesheet" href="css/screen.css" type="text/css" />
<meta http-equiv="content-type" content="text/html; charset=windows-1251" />
<title>Index</title>
 </head>
 <body>
<img src="Images/portfolioimage2.png" alt="" class="photo" />
<img src="Images/portfolioimage2.png" alt="" width="165" height="180">  
<!--testimonial 1 -->
<div id="block">
    <h3>Featured testimonial</h3>
    <div class="photo">
        <img src="img/photo-bg.png" alt="" class="photo-bg"/>
        <img src="Images/portfolioimage2.png" alt="" class="photo" />
    </div>
    <p class="content"><span class="laquo">&nbsp;</span>Lorem ipsum dolor sit amet, sanctus corrumpit ei quo, eu quo meis brute, sed ut possit vocibus graecis. Dicant mandamus ne duo, mazim aperiam ei eos.<span class="raquo">&nbsp;</span></p>
    <div class="sign">
        <a href="#">Jay Hafling</a>
        <p>Freelance web-designer</p>
    </div>
</div>

Answer 1

您的代码中没有任何内容阻止自定义图像替换模板附带的图像。它在我的电脑上运行良好。

唯一的可能性就是路径。请将您的图像复制到现有的＆＃34; img＆＃34;目录和replce只有文件名。这应该可以解决你的问题。

<img src="img/portfolioimage2.png" alt="" class="photo" />

包含正确目录的图片未显示在网页上

1 个答案: