Question

我在为学校做的网站遇到了一些麻烦。我已经困扰了几天了。问题是我的CSS样式没有显示出来。一切都在我的HTML页面上验证，并且CSS页面上的所有内容都会验证，但背景图像和hlsa错误除外。图像名称是“背景”，我收到此错误：

18标题值错误：background-image Parse Error（“Module3 / background.jpeg”） 29 h1值错误：颜色0不是颜色值：hlsa（0,0％，0％，0.2）

我的样式表：

body 
.gradient
    {background-color:#666666;
    background-image: linear-gradient(to bottom, #ffffff, #666666);
    font-family: Arial, Helvetica, sans-serif;
    Margin:0px
    ;
}

#container { background-color: white;
    width:960px;
    padding:20px;   
    margin-left:auto;
    margin-right:auto;
    box-shadow:5px 5px 5px #1e1e1e;
    border-radius:15px}

header {background-image: ("Module3/background.jpeg");
    background-repeat: No-repeat;
    height:150px;
    border:1px;
    border-color: black;
    border-radius:15px;
    }

h1 {font-family:Impact, sans-serif;
    font-size:4em;
    padding-left:15px;
    color: hlsa(0,0%,0%,0.2);}

h2 {    font-family: Impact, Sans-serif;
    font-size: 2em;
    color: black;}
.photo {float:right;}


footer {border-style: solid;
     border-top: thick;
    font-size:.8em;
    font-style: italic; }

我的HTML页面：

       <!DOCTYPE html>
<html lang="en">

<head>

<meta charset="utf-8">
<title>My name</title>
<LINK href="Module3/assignment3.css" rel="stylesheet" type="text/css">
</head>

<body>
<div class="w3-container">
<!--My required class information
-->

<h1>My Name</h1>

<h2>Education Goals</h2>
<img src="Module3/Sarah.jpeg" alt="Sarah" height="282" width="200">
<ul>
    <li>my goals</li>
    <li>Graduate from my school</li>
</ul>

<h2>Hobbies/Interests</h2>
<ul> 
    <li>Reading</li>
    <li>Volunteering</li>

</ul>
<h2>Favorite Web Sites</h2>
<ul>
    <li><a href="http://www.wikipedia.org">Wikipedia</a></li>
    <li><a href="http://www.mainstrike.com/mstservices/handy/insult.html">The Shakespearean Insulter</a></li>
</ul>

<footer>
<p> &copy; <a href="myschoolemail">me</a></p>
</footer>
</div>
</body>

</html>

Answer 1

要使用background-image选择器，您必须将值放在url()中。例如：

background-image: url("Module3/background.jpeg");

确保图像也正确指向。

Answer 2

保持代码清洁和格式良好。打开开发人员工具并检查损坏的属性如果您不确定是否可以在不犯错误的情况下编写属性，请使用emmet或类似的实用程序。

body,
.gradient {
  background-color: #666;
  background-image: linear-gradient(to bottom, #fff, #666);
  font-family: Arial, Helvetica, sans-serif;
  margin: 0px;
}

#container {
  background-color: white;
  width: 960px;
  padding: 20px;   
  margin-left: auto;
  margin-right: auto;
  box-shadow: 5px 5px 5px #1e1e1e;
  border-radius: 15px;
}

header {
  background-image: url("Module3/background.jpeg"); /* Be sure that path is exist */
  background-repeat: no-repeat;
  height: 150px;
  border: 1px;
  border-color: black;
  border-radius: 15px;
}

h1 {
  font-family: Impact, sans-serif;
  font-size: 4em;
  padding-left: 15px;
  color: hsla(0, 0%, 0%, 0.2);
}

h2 {
  font-family: Impact, Sans-serif;
  font-size: 2em;
  color: black;
}

.photo {
  float:right;
}

footer {
  border-style: solid;
  border-top: thick;
  font-size:.8em;
  font-style: italic;
}

<div class="w3-container">
  <!--My required class information-->

  <h1>My Name</h1>

  <h2>Education Goals</h2>

  <img src="Module3/Sarah.jpeg" alt="Sarah" height="282" width="200">

  <ul>
    <li>my goals</li>
    <li>Graduate from my school</li>
  </ul>

  <h2>Hobbies/Interests</h2>

  <ul> 
    <li>Reading</li>
    <li>Volunteering</li>
  </ul>

  <h2>Favorite Web Sites</h2>

  <ul>
    <li><a href="http://www.wikipedia.org">Wikipedia</a></li>
    <li><a href="http://www.mainstrike.com/mstservices/handy/insult.html">The Shakespearean Insulter</a></li>
  </ul>

  <footer>
    <p> &copy; <a href="myschoolemail">me</a></p>
  </footer>
</div>

为什么我的CSS样式表不起作用？

2 个答案: