我是一位相当称职的C＃程序员，刚开始不喜欢HTML和CSS等。
我当时正在玩 Neocities ，试图为我的文字设置一个background image，尽管我尽了最大努力，但绝对没有任何表现。
html amd图像位于同一目录中（我知道，稍后再解决！）。
有人可以看一下这段代码，并指出正确的方向吗？
最诚挚的问候，
- Rev
编辑：非常遗憾，感谢所有注释和编辑。在下面的页面中添加了html示例。这是一个很大的页面，由于要与我要招募艺术家的项目相关，因此我对在这里上传内容并不完全满意-我现在还不想提供整个页面。相反，我获取了一些典型段落的示例，等等。
文本中的大多数评论来自Neocities样板，我尚未删除。
感谢您抽出宝贵的时间来研究新手的工作。
/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
HTML content. To learn how to do something, just try searching Google for questions like
"how to change link color." */
a:link {
color: #cc0000;
}
a:visited {
color: #999999;
}
a:hover {
color: #ff3300;
}
body {
background-color: #323238;
color: #648381;
font-family: Verdana;
word-wrap: break-word;
width: 640px;
*/
}
.hero-image {
/* background-image: url(powerNode45Degrees01001RS.png); /* The image used */
background-image: url("emotionalComp01.png");
/* background-color: #323238; /* Used if the image is unavailable */
/* height: 1024px; /* You must set a specified height */
/* background-position: center center; /* Center the image */
/* background-repeat: no-repeat; /* Do not repeat the image */
/* background-size: cover; /* Resize the background image to cover the entire container */
}<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Project Factotum Concept Artist Recruitment</title>
<!-- The style.css file allows you to change the look of your web pages.
If you include the next line in all your web pages, they will all share the same look.
This makes it easier to make new pages for your site. -->
<link href="/style.css" rel="stylesheet" type="text/css" media="all">
</head>
<!--<img src="powerNode45Degrees01001RS.png" />-->
<body>
<img src="superSuperSuperSuperEarly3DSketch01.png" alt="A VERY early 3D concept" title="A VERY early 3D concept" />
<h1>Generic Heading</h1>
<p>I am an experienced game developer (C#/Unity/Blender/Photoshop/Krita) with multiple completed mobile projects for clients (can provide information on a number of them, am under NDA for others).</p>
<p>While I’m a decent modeller, I don’t have the genius for design that this project demands - hence recruiting a 2D concept artist!</p>
<h2 id="ARTISTREQUIREMENTS">ARTIST REQUIREMENTS</h2>
<ul>
<li>2D concept artist, potentially a generalist. 3D concepts are cool, but not essential.</li>
<li>Artist should be able to collaborate using Skype / Discord / Gmail / Google Docs.</li>
<li>Candidate must demonstrate a firm grasp of colour theory, composition, anatomy, working visual hierarchies, developing clear unique silhouettes.</li>
<li>Ideally, artist will be willing to do rough paint-overs of environment screenshots to show designs in-situ.
<li>Should be able to follow <a href="https://wiki.unrealengine.com/Assets_Naming_Convention">this naming convention</a></li>
</ul>
</body>
</html>
答案 0 :(得分：2)
您的HTML没有提及hero-image类。那是主要问题。我在周围的div中添加了一类英雄图像，并使用占位符“ hero”图像（Wiki超人徽标）来演示解决方案。文件路径包括域名，文件夹，文件名。在您自己的主机上，可以缩短此时间（以排除域名，并以反斜杠开头），但是由于您刚开始，建议您使用完整路径
还要确保以下几点： -文件未损坏 -文件名拼写正确
希望这会有所帮助
a:link {
color: #cc0000;
}
a:visited {
color: #999999;
}
a:hover {
color: #ff3300;
}
body {
background-color: #323238;
color: #648381;
font-family: Verdana;
word-wrap: break-word;
width: 640px;
*/
}
.hero-image {
/* background-image: url(powerNode45Degrees01001RS.png); /* The image used */
background-image: url("https://upload.wikimedia.org/wikipedia/en/thumb/e/ea/Superman_shield.svg/1200px-Superman_shield.svg.png");
/* background-color: #323238; /* Used if the image is unavailable */
/* height: 1024px; /* You must set a specified height */
/* background-position: center center; /* Center the image */
/* background-repeat: no-repeat; /* Do not repeat the image */
background-size: contain; /* Resize the background image to cover the entire container */
}<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Project Factotum Concept Artist Recruitment</title>
<!-- The style.css file allows you to change the look of your web pages.
If you include the next line in all your web pages, they will all share the same look.
This makes it easier to make new pages for your site. -->
<link href="/style.css" rel="stylesheet" type="text/css" media="all">
</head>
<!--<img src="powerNode45Degrees01001RS.png" />-->
<body>
<div class="hero-image">
<img src="superSuperSuperSuperEarly3DSketch01.png" alt="A VERY early 3D concept" title="A VERY early 3D concept" />
<h1>Generic Heading</h1>
<p>I am an experienced game developer (C#/Unity/Blender/Photoshop/Krita) with multiple completed mobile projects for clients (can provide information on a number of them, am under NDA for others).</p>
<p>While I’m a decent modeller, I don’t have the genius for design that this project demands - hence recruiting a 2D concept artist!</p>
<h2 id="ARTISTREQUIREMENTS">ARTIST REQUIREMENTS</h2>
<ul>
<li>2D concept artist, potentially a generalist. 3D concepts are cool, but not essential.</li>
<li>Artist should be able to collaborate using Skype / Discord / Gmail / Google Docs.</li>
<li>Candidate must demonstrate a firm grasp of colour theory, composition, anatomy, working visual hierarchies, developing clear unique silhouettes.</li>
<li>Ideally, artist will be willing to do rough paint-overs of environment screenshots to show designs in-situ.
<li>Should be able to follow <a href="https://wiki.unrealengine.com/Assets_Naming_Convention">this naming convention</a></li>
</ul>
</div>
</body>
</html>
答案 1 :(得分：1)
您已经在CSS中创建了一个类规则，以将图片显示为和元素的背景：
.hero-image {
/* background-image: url(powerNode45Degrees01001RS.png); /* The image used */
background-image: url("emotionalComp01.png");
/* background-color: #323238; /* Used if the image is unavailable */
/* height: 1024px; /* You must set a specified height */
/* background-position: center center; /* Center the image */
/* background-repeat: no-repeat; /* Do not repeat the image */
/* background-size: cover; /* Resize the background image to cover the entire container */
}
然后，您需要确定需要使用class属性为class="hero-image"的css规则来应用哪个或哪些元素。在这里，您可以将其应用于<p>和<ul>元素，例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Project Factotum Concept Artist Recruitment</title>
<!-- The style.css file allows you to change the look of your web pages.
If you include the next line in all your web pages, they will all share the same look.
This makes it easier to make new pages for your site. -->
<link href="/style.css" rel="stylesheet" type="text/css" media="all">
</head>
<!--<img src="powerNode45Degrees01001RS.png" />-->
<body>
<img src="superSuperSuperSuperEarly3DSketch01.png" alt="A VERY early 3D concept" title="A VERY early 3D concept" />
<h1>Generic Heading</h1>
<p class="hero-image">I am an experienced game developer (C#/Unity/Blender/Photoshop/Krita) with multiple completed mobile projects for clients (can provide information on a number of them, am under NDA for others).</p>
<p>While I’m a decent modeller, I don’t have the genius for design that this project demands - hence recruiting a 2D concept artist!</p>
<h2 id="ARTISTREQUIREMENTS">ARTIST REQUIREMENTS</h2>
<ul class="hero-image">
<li>2D concept artist, potentially a generalist. 3D concepts are cool, but not essential.</li>
<li>Artist should be able to collaborate using Skype / Discord / Gmail / Google Docs.</li>
<li>Candidate must demonstrate a firm grasp of colour theory, composition, anatomy, working visual hierarchies, developing clear unique silhouettes.</li>
<li>Ideally, artist will be willing to do rough paint-overs of environment screenshots to show designs in-situ.</li>
<li>Should be able to follow <a href="https://wiki.unrealengine.com/Assets_Naming_Convention">this naming convention</a></li>
</ul>
</body>
</html>
段落和UL列表中均应显示背景图像。
答案 2 :(得分：0)
CSS看起来不错，HTML可能有问题。您是否在div或id="hero-image"中添加了class="hero-image"，因为如果添加了ID，那么CSS应该是这样的：
#hero-image {
background-image: url("emotionalComp01.png");
}
如果添加了CLASS，它应该是这样的：
.hero-image {
background-image: url("emotionalComp01.png");
}
但是如果这不是问题，则需要在此处发布html。