主持过渡后未显示CSS背景图片

时间:2017-08-23 04:52:29

标签: html css

我需要一些帮助来弄清楚为什么我的CSS背景图片突然没有显示出来。我一直在雅虎托管,但他们的服务器非常慢,所以我切换到主机鳄鱼。在将所有内容传输给他们之后,我注意到图片没有显示...结果是文件扩展名已经上传到大写字母中。改变它,一切都很好。然而现在画面已经消失,我无法取回它。从那时起到现在,我还没有改变任何事情。我错过了什么吗?请帮忙!



/* Header */

#header {
  background: #333333 url("../images/pic01.jpg") !important; no-repeat;
  background-size: cover;
  color: #fff;
  padding: 6em 0;
  text-align: center;
  background-position: 0% 65%;
  position: relative;
}

#header:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(16, 32, 48, 0.25);
}

#header > * {
  position: relative;
  z-index: 1;
}

.homepage #header {
  padding: 8em 0;
  background-position: center;
}

<html>
<head>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<title>AIC Consulting &amp; Design</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<!--[if lte IE 8]><script src="css/ie/html5shiv.js"></script><![endif]-->
<script src="js/jquery.min.js"></script>
<script src="js/jquery.dropotron.min.js"></script>
<script src="js/skel.min.js"></script>
<script src="js/skel-layers.min.js"></script>
<script src="js/init.js"></script>
<noscript>
<link rel="stylesheet" href="css/skel.css" />
<link rel="stylesheet" href="css/style.css" />
</noscript>
<!--[if lte IE 8]><link rel="stylesheet" href="css/ie/v8.css" /><![endif]-->
</head>
<body class="homepage">



<!-- Header -->
<div style="padding-top:10px; padding-left:10px">
  <h1>
    <img  alt="AIC Consulting and Design Logo" longdesc="Blue circle with AIC consulting and Design in front of a feather" "relative" src="images/Logo-transparent.gif" height="71"  >&nbsp; Creations made to your design.
  </h1>
</div>
<div id="header">
  <div class="container">
  <!-- Logo -->

    <!-- Nav -->
    <nav id="nav">
      <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="">Services</a>
        <ul>
          <li><a href="websites.html">Website Design</a></li>
          <li><a href="id.html">Instructional Design</a><ul>
          <li><a href="technology.html">Technology Integration</a></li>
          <li><a href="usability.html">Usability testing</a></li>
          <li><a href="needs.html">Needs Assessment</a></li>
          <li><a href="training.html">Training Services</a></li>
        </ul>
      </li>
      <li><a href="video.html">Video Production</a></li>
      <li><a href="publishing.html">Academic Services</a>
        <ul>
          <li><a href="organizers.html">For Organizers</a></li>
          <li><a href="authors.html">For Authors</a></li>
        </ul>     
      </li>
      <li><a href="portfolio.html">Portfolio</a></li>
      <li><a href="about.html">About Us</a></li>
      <li><a href="mailto:aicconsulting@annsinkycreations.com; aicconsulting@comcast.net">Email AIC Consulting 
&amp; Design, LLC</a></li>
    </ul>
  </nav>
&#13;
&#13;
&#13;

2 个答案:

答案 0 :(得分:0)

对于那些不想阅读评论的人。我无法看到这张照片,其他人帮助我。简单的解决方案是清除缓存。

答案 1 :(得分:0)

您可以使用绝对路径位置

首先尝试在浏览器“http://www.site.ext/images/pic01.jpg”中查看它,如果它存在则

  background-color:#f1f1f1;
  background-image: url('http://www.site.ext/images/pic01.jpg'); 

  background: url('http://www.site.ext/images/pic01.jpg') #f1f1f1;