css - 为什么图片没有出现在背景中

问题描述

为什么 showCase[header] 中的背景图片没有出现。因为，图像与我在 css url('') 中提到的目录位于同一目录中。我已经做了我能做的每一件事。但是，我认为在 showCase 类之前我的 css 代码有问题。

我如何在 showCase 类中显示背景图像[在标题之后]。

/* Global Things */
body{
    padding:0;
    margin:0;
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.5em;
}
.container{
    width : 80%;
    margin : auto;
    overflow:hidden;
}
ul{
    margin:0;
    padding:0;
    list-style-type:none;
}
/* Header */
header{
    background-color: darkorange;
    padding : 5px;
    margin : 0px;

}
header .logoDesign{
    font-size:20px;
    float:left;
}
header ul li {
    float: left;
    display:inline-block;
    margin: 0 20px 0 20px;

}
header ul a {
    text-decoration: none;
    font-size:16px;
    color:white;
    display: inline-block;
}
header ul a:hover {
    text-decoration:underline;
    font-size:18px;
    font-weight: bold;
    color:red;
    padding:5px;
    transition: .5s;

    }
    header nav{
        float:right;
        padding-top: 30px;
    }
header .logoDesign .lighter{
        color: #FFDF00;
    }

    /* ShowCase Design*/
.showCase{
    text-align: center;
    padding-top: 50px;
    padding-right: 170px;
    padding-bottom:30px;
    padding-left:170px;
    background: url('./images/showcase.jpg') no-repeat;
    min-height:150px;
    line-height: 1.5em;
}
.showCase h1{
    line-height:1em;
    text-transform: uppercase;

}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title> Welcome | Faizan Corporation </title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
                    <!-- For Logo and links.-->
    <header>  
    <div class = "container">
    <div class = "logoDesign" >
                <h1> <span class = "lighter">Faizan</span> Industries </h1>
            </div>
            <nav>
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="about.html">About</a></li>
                <li><a href="services.html">Services</a></li>
            </ul>
            </nav>
        </div>
    </header>
                      <!-- Let's Try to design Showcase. -->
                      <section class = "showCase" >
              <h1>Affordable Professional Websites</h1>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pellentesque est vel vulputate interdum. Nulla vel ante sit amet tortor dignissim fermentum a vel nunc.</p>
          </section>
                        <!-- Now Newsletter Section. -->   
        <div class = "container">
      <div class = "subButton">
          <form action="nothing.php">
              <p>Subscribe to our Newsletter</p>
              <input type="email" placeholder="Enter You Email">
          <button action = "submit" > Submit </button>
          </form>
      </div>
        </div>
                           <!--small Section.-->
<div class = "container">
                           <section class = "portfolio" >

    <ul>
            <li> <img src="images/logo_brush.png" alt="Graphic Design">
                    <h2>Graphics Designing</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus mi augue, viverra sit amet ultricies</p>
            </li>
          
            <li> <img src="images/logo_html.png" alt="Graphic Design">
                <h2>HTML 5 Markup</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus mi augue, viverra sit amet ultricies</p>
            </li>

            <li> <img src="images/logo_css.png" alt="Graphic Design">
                 <h2>CSS and CSS 3</h2>
                 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus mi augue, viverra sit amet ultricies</p>
            </li>
    </ul>
</section>
<footer>
    <p>Faizan Industries, Copyright &copy; 2019 </p>
</footer>
</div>

</body>
</html>

标签： css

css - 为什么图片没有出现在背景中

问题描述

解决方案

推荐阅读