Question

在我的网站上，我的背景图像在firefox上显示正常，但是在chrome上，两边都有大的白色框，当jquery图像幻灯片移动到下一个图像时，它们会消失。我将CSS中的背景图像链接到包含图像滑块的所有内容所在的正文。

这里是现场网站

http://wilsontsa.org/Technology%20courses/Technology%20Courses.html

HTML

<body>

<div id="bar">
</div>
<center>
<div id="pagecontainer">
<div id="container">
<div id="navigation">

<ul id="navigation">
<li id="techlink" class="dropdown"><a href="../Technology courses/Technology                 Courses.html" style="color:#046f83">Technology Courses</a>
<ul class="sub_navigation">
<li><a href="../Technology courses/Computer Science.html">&nbsp;Computer &nbsp;Science</a></li>
<li><a href="../Technology courses/Digital Video.html">&nbsp;&nbsp;&nbsp;&nbsp;Digital Video&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></li>
<li><a href="../Technology Courses/Technology Innovation.html">Technology Innovation</a></li>
<br />
<li><a href="../Technology courses/Visual Design and Image Applications.html">Visual Design and Image App.</a></li>
<br />
<li><a href="../Technology courses/Web Design.html">Web Design</a></li>
</ul>
</li>
<li id="englink" class="dropdown"><a href="../Engineering Courses/Engineering Courses.html">Engineering Courses</a>
<ul class="sub_navigation">
<li><a href="../Engineering Courses/Introduction to Engineering and Design.html">Intro to Engineering</a></li>
<br />
<li><a href="../Engineering Courses/Computer Integrated Manufacturing.html">Computer Integrated Manufact.</a></li>
<br />
<li><a href="../Engineering Courses/Principles of Engineering.html">Principles of Engineering</a></li>
<br />
<li><a href="../Engineering Courses/Digital Electronics.html">Digital Electronics</a></li>
<br />
<li><a href="../Engineering Courses/Civil Engineering and Architecture.html">Civil Engineering</a></li>
<br />
<li><a href="../Engineering Courses/Aerospace Engineering.html">Aerospace Engineering</a></li>
<br />
<li><a href="../Engineering Courses/Engineering Design and Development.html">Engineering Design</a></li>
<br />
<li><a href="../Engineering Courses/I-Stem.html">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;I-STEM&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></li>
</ul>
</li>
<li id="STEMlink"><a href="../STEM/stem.html">STEM</a></li>
<li id="weblink" class="dropdown"><a href="../Webmaster/Evolution.html">Webmaster</a>
<ul class="sub_navigation">
<li><a href="../Webmaster/Evolution.html">Evolution</a></li>
<li><a href="../Webmaster/Adapting.html">Adapting</a></li>
<li><a href="../Webmaster/Advertising.html">Business Model</a></li>
<li><a href="../Webmaster/Solution.html">Future</a></li>
</ul>
</li>

<div id="tsa" class="TSA">
  <li><a href="../TSA Chapter/TSA.html"><img  src="../Images/Design Images/TSA-LOGO.png" width="50" height="34" /></a></li>
  </div>
</ul>
</div> <!--navigation div --> 

</ul>
</center>

<div id="spacer">

<div id="wrapper">
<div>
<div class="slider-button" onclick="ss.move(-1)">&laquo;</div>
<div id="slideshow">
  <ul id="slides">
    <li><img src="../Javascript Photos/Picture1.png" width="900" height="300" alt="Coral Reef"></li>
    <li><img src="../Javascript Photos/Picture2.png" width="900" height="300" alt="Sea turtle">
    </li>
    <li><img src="../Javascript Photos/Picture3.png" width="900" height="450" alt="Coral Reef"></li>
    <li><img src="../Javascript Photos/Picture4.png" width="900" height="300" alt="Blue Fish"></li>
  </ul>
  </div>
  <div class="slider-button" onclick="ss.move(1)">&raquo;</div>
  </div>
  <ol id="pagination" class="pagination">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  </ol>
 </div>

CSS

body {
background-image: url(Images/Tech nology%20Images/bg_Tech.gif);}

滑块CSS

li.current {
background:#102c75;}


#slideshow {
float:left; 
width:900px; 
height:300px; 
border:2px solid #ccc; 
background:#fff;
position:relative;
top:16px;
z-index:-1;}



#slides {
position:relative; 
width:900px; 
height:300px; 
list-style:none; 
overflow:auto;
z-index:-1;}



#slides li {
width:900px; 
height:300px;}



.fader-slide {
opacity:0; 
position:absolute;}

.fader-fade {
opacity:1;
 -webkit-transition:opacity .4s; 
 -moz-transition:opacity .4s; 
 transition:opacity .4s;}



#content {
width:900px; 
height:270px; 
padding:15px 18px 15px 18px; 
background:#fff;}



#content h1 {
font:22px Georgia,Verdana; 
margin-bottom:15px; 
color:#036;}

#caption {
background:#fff; 
position:relative;}

#caption div {
position:absolute; 
bottom:0; 
left:0; 
width:900px; 
padding:15px 18px 10px 18px; 
background:#000; 
background:rgba(0,0,0,.7);}



#caption h2 {
font:18px Georgia,Verdana; 
margin-bottom:6px; 
color:#eee;}

#caption p {
line-height:1.4; 
color:#aaa;}

背景图像显示在Firefox中，但不是铬

0 个答案: