Question

我在这个网站上使用的单独背景图像比首先应用的图像要多。即使我三重检查图像的链接是否正确，我想要在页面的标题区域中使用的背景图像也不会显示。是否有任何干扰图像出现的能力？

body, html {
  font-family: 'Asap', sans-serif; 
  text-align: center;
  padding: 0px;
  margin: 0px;
  
}

body {
  background-image: url("../Images/firepit2.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover; 
}

a {
  text-decoration: none;
  color: #000;
}

a:link {
  text-decoration: none;
  color: #000;
}

a:visited {
  
}

a:hover {
  font-weight: bold;
}

a:active {
  
}

#Logo {
  font-size: 3em;
  background-color: #064501; /* Dark Woodrow Green */
  margin-top: 0px;
  margin-bottom: 0px;
  padding-top: 10px;
  padding-bottom: 10px;
}

#Quote {
  background-color: #064501;
  margin: 0px;
  padding-bottom: 17px;  
}

#HeaderText {
  background-image: url("Images/GrassBackground.jpg");
}

#Navigation {
  list-style: none;
  margin-top: 0px;
  background-color: rgba(255, 255, 255, .65);
  padding: 10px;
}

#Navigation li {
  display: inline; 
  padding-left: 5px;
  padding-right: 5px;
}

#Navigation li a {
  text-decoration: none;
  color: #000;
}

#Wrapper {
  width: 50%;
  margin: 0px auto;
  margin-top: 90px;
  background-color: rgba(255, 255, 255, .65);
  padding-top: 10px;
  padding-right: 30px;
  padding-bottom: 10px;
  padding-left: 30px;
  border-radius: 40px;
}

#Greeting {
  border-bottom: 1px solid;
  padding-bottom: 20px;
}

#Wrapper p {
  line-height: 1.1em; 
  margin-top: 26px;
  text-align: center;
}

footer {
  background-color: #064501; /* Dark Woodrow Green */
  margin-top: 90px;
  margin-bottom: 0px;
  padding-bottom: 0px;
  font-style: italic;
  border-bottom: 1px solid #064501;
}

footer p {
  float: left; 
}

footer ul {
  float: right; 
}

footer ul li {
  display: inline;
}

footer::after {
  display: block;
  content: '';
  clear: both;
}

#Copyright {
  margin-left: 25px;
  padding-top: 10px;
  padding-bottom: 10px;
}

#Contact {
  margin-right: 25px; 
  padding-top: 10px;
  padding-bottom: 10px;
}

#Contact li {
  padding-left: 3px;
  padding-right: 3px;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Woodrow Lawn and Turf</title>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
-->
  <meta name="keywords" content="">
  <meta name="description" content="">
  <link rel="stylesheet" href="../CSS/index.css">
  <link href="https://fonts.googleapis.com/css?family=Asap:400,400i,500,500i,700,700i" rel="stylesheet"> 
</head>
<!-- DEVELOPER NOTES -->
  <!--

    - Keywords and description meta are still subject to change by the client.
    - Make sure to add correct target attributes and file paths to the nav links.
    - All images used in this mockup are subject to copyright currently.
    - Make sure to add alternate font families to the font-family style. (2 only)
    - Viewport scale commented currently.

  -->
<body>
  <header>
    <div id="HeaderText">
      <h1 id="Logo">Woodrow Lawn and Turf</h1>
      <p id="Quote"><i>"Turf turf lawn turf turf lawn"</i></p>
    </div>
    <nav>
      <ul id="Navigation">
        <li><a href="index.html">About Us</a></li>
        <li>|</li>
        <li><a href="#">Lawn Stuff</a></li>
        <li>|</li>
        <li><a href="#">Dirt Stuff</a></li>
        <li>|</li>
        <li><a href="#">Flower Bed Stuff</a></li>
        <li>|</li>
        <li><a href="#">Patio Stuff</a></li>
        <li>|</li>
        <li><a href="#">Firepit Stuff</a></li>
        <li>|</li>
        <li><a href="#">Commercial and Business Stuff</a></li>
      </ul>
    </nav>
  </header>
  <div id="Wrapper">
    <h1 id="Greeting">Welcome!</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
    <footer>
      <p id="Copyright">&copy; Copyright Woodrow Lawn and Turf LLC 2017</p>
      <ul id="Contact">
        <li>Contact:</li>
        <li><a href="tel:+1-999-999-9999">(999)999-9999</a></li>
        <li>|</li>
        <li><a href="mailto:stuffcompany@comp.net">stuffcompany@comp.net</a></li>      
      </ul>
    </footer>
  

 

 
</body>
  
  
  









</html>

Answer 1

标题容器中的元素具有覆盖图像的背景颜色

body, html {
  font-family: 'Asap', sans-serif; 
  text-align: center;
  padding: 0px;
  margin: 0px;
  
}

body {
  background-image: url("../Images/firepit2.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover; 
}

a {
  text-decoration: none;
  color: #000;
}

a:link {
  text-decoration: none;
  color: #000;
}

a:visited {
  
}

a:hover {
  font-weight: bold;
}

a:active {
  
}

#Logo {
  font-size: 3em;
 /** background-color: #064501; /* Dark Woodrow Green * this overrides your background image*/
  margin-top: 0px;
  margin-bottom: 0px;
  padding-top: 10px;
  padding-bottom: 10px;
}

#Quote {
  /**background-color: #064501;** this overrides your background image*/
  margin: 0px;
  padding-bottom: 17px;  
}

#HeaderText {
  background-image: url("https://homepages.cae.wisc.edu/~ece533/images/arctichare.png");
}

#Navigation {
  list-style: none;
  margin-top: 0px;
  background-color: rgba(255, 255, 255, .65);
  padding: 10px;
}

#Navigation li {
  display: inline; 
  padding-left: 5px;
  padding-right: 5px;
}

#Navigation li a {
  text-decoration: none;
  color: #000;
}

#Wrapper {
  width: 50%;
  margin: 0px auto;
  margin-top: 90px;
  background-color: rgba(255, 255, 255, .65);
  padding-top: 10px;
  padding-right: 30px;
  padding-bottom: 10px;
  padding-left: 30px;
  border-radius: 40px;
}

#Greeting {
  border-bottom: 1px solid;
  padding-bottom: 20px;
}

#Wrapper p {
  line-height: 1.1em; 
  margin-top: 26px;
  text-align: center;
}

footer {
  background-color: #064501; /* Dark Woodrow Green */
  margin-top: 90px;
  margin-bottom: 0px;
  padding-bottom: 0px;
  font-style: italic;
  border-bottom: 1px solid #064501;
}

footer p {
  float: left; 
}

footer ul {
  float: right; 
}

footer ul li {
  display: inline;
}

footer::after {
  display: block;
  content: '';
  clear: both;
}

#Copyright {
  margin-left: 25px;
  padding-top: 10px;
  padding-bottom: 10px;
}

#Contact {
  margin-right: 25px; 
  padding-top: 10px;
  padding-bottom: 10px;
}

#Contact li {
  padding-left: 3px;
  padding-right: 3px;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Woodrow Lawn and Turf</title>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
-->
  <meta name="keywords" content="">
  <meta name="description" content="">
  <link rel="stylesheet" href="../CSS/index.css">
  <link href="https://fonts.googleapis.com/css?family=Asap:400,400i,500,500i,700,700i" rel="stylesheet"> 
</head>
<!-- DEVELOPER NOTES -->
  <!--

    - Keywords and description meta are still subject to change by the client.
    - Make sure to add correct target attributes and file paths to the nav links.
    - All images used in this mockup are subject to copyright currently.
    - Make sure to add alternate font families to the font-family style. (2 only)
    - Viewport scale commented currently.

  -->
<body>
  <header>
    <div id="HeaderText">
      <h1 id="Logo">Woodrow Lawn and Turf</h1>
      <p id="Quote"><i>"Turf turf lawn turf turf lawn"</i></p>
    </div>
    <nav>
      <ul id="Navigation">
        <li><a href="index.html">About Us</a></li>
        <li>|</li>
        <li><a href="#">Lawn Stuff</a></li>
        <li>|</li>
        <li><a href="#">Dirt Stuff</a></li>
        <li>|</li>
        <li><a href="#">Flower Bed Stuff</a></li>
        <li>|</li>
        <li><a href="#">Patio Stuff</a></li>
        <li>|</li>
        <li><a href="#">Firepit Stuff</a></li>
        <li>|</li>
        <li><a href="#">Commercial and Business Stuff</a></li>
      </ul>
    </nav>
  </header>
  <div id="Wrapper">
    <h1 id="Greeting">Welcome!</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
    <footer>
      <p id="Copyright">&copy; Copyright Woodrow Lawn and Turf LLC 2017</p>
      <ul id="Contact">
        <li>Contact:</li>
        <li><a href="tel:+1-999-999-9999">(999)999-9999</a></li>
        <li>|</li>
        <li><a href="mailto:stuffcompany@comp.net">stuffcompany@comp.net</a></li>      
      </ul>
    </footer>
  

 

 
</body>
  
  
  









</html>

Answer 2

哇现在结束了我的生活。差不多一个小时我一直试图解决这个问题，我忘了在我的文件夹中的背景图片的URL中的斜杠之前添加2个句点......

这个背景图片我做错了什么？

2 个答案: