如何在JavaScript滑块容器上放置一个forground图像？

Question

我有一个滑块模块与JavaScript和一个CSS模板，我需要修改放置在滑块顶部的图像，使底部的圆形框架。

＃slide-outer_ [MODULEID] {position：relative; top：0;底部：0;身高：100％;左：0;正确：0;宽度：100％;背景：＃000 url（'[PATH] /Slider-Foreground.png'）no-repeat;的z-index：999;}

这里是页：http://www.sbsclientservices.com/Home.aspx

你可以看到在第一张幻灯片图像的背景前景图像加载，但随后消失。

谢谢， 马克

Answer 1

好了，我打了一下通过元素检查你的HTML，我想我得到了你所需要的。 这是一个普遍的想法，你可能需要调整，我只在Chrome上进行实验。

存在加载程序映像/区域存在的div元素。 我在它下面添加了另一个div元素。看到的代码和截图（我不能上传屏幕截图stackoverflow不允许:)）

<div id="mss-slider_3701" style=" 
    background: #FFF url('/DesktopModules/Markit.SlideShow/Templates/JJ-Rasper-Clone 1/Slider-Foreground.png') no-repeat; 
"> 
     <div id="slide-loading_3701" style="display: none;"> </div> 

     <!-- !! this element was added --> 
     <div style=" 
    backgrou![enter image description here][1]nd: #FFF url('/DesktopModules/Markit.SlideShow/Templates/JJ-Rasper-Clone 1/Slider-Foreground.png') no-repeat; 
    width: 800px; 
    height: 184px; 
    position: absolute; 
    z-index: 1000000; 
    opacity: .5; 
    top: 0px; 
"></div> 


     <div id="slide-wrapper_3701" style="display: block; overflow: hidden; position: relative;"> 
     <div id="slide-outer_3701" style="position: absolute; width: 1580px; left: -443.98px;"> 
      <div class="slide" style="visibility: visible; zoom: 1; opacity: 0.4016846526922899; position: relative; float: left;"> 
      <div class="slide-inner"> 
       <img src="/DesktopModules/Markit.SlideShow/ImageHandler.ashx?img=/Portals/50/SlideShow_Photos/3701/Community-Center-S.png&amp;w=840&amp;h=234&amp;Q=0&amp;PortalID=50" alt="Welcome to your Community"> 
       <div class="mss-introtext_3701"> 

       <div style="position: absolute; width: 100%; height: 100%; z-index: 1;"></div><div style="width: 100%; height: 100%; position: relative; z-index: 2;"><div style="margin: 0px; overflow: hidden; height: 0px;"><div class="slidetext_3701" id="slide_201" style="margin: -174px 0px 0px;"> 
        <div class="slidetitle">Welcome to your Community</div> 
        <div class="slidesubtitle">Make the Winston Community Center your first step in planning your Wedding, Banquet, Birthday</div> 
        <div class="readonReplacement"> </div> 
       </div></div></div></div> 
      </div> 
      </div> 
      <div class="slide" style="visibility: visible; zoom: 1; opacity: 0.5983153473077101; position: relative; float: left;"> 
      <div class="slide-inner"> 
       <img src="/DesktopModules/Markit.SlideShow/ImageHandler.ashx?img=/Portals/50/SlideShow_Photos/3701/wedding.png&amp;w=840&amp;h=234&amp;Q=0&amp;PortalID=50" alt="Planning a Wedding?"> 
       <div class="mss-introtext_3701"> 

       <div style="position: absolute; width: 100%; height: 100%; z-index: 1;"></div><div style="width: 100%; height: 100%; position: relative; z-index: 2;"><div style="margin: 0px; overflow: hidden; height: 168px;"><div class="slidetext_3701" id="slide_202" style="margin: 0px;"> 
        <div class="slidetitle">Planning a Wedding?</div> 
        <div class="slidesubtitle">Our large Grand Room can accommodate large weddings, and our wedding package is priced for any budget. </div> 
        <div class="readonReplacement"> </div> 
       </div></div></div></div> 
      </div> 
      </div> 
     </div> 
     </div> 
    </div>