javascript - 如何将前景图像放在 java 脚本 slider 容器上？

Question

我有一个带有 javascript 的 slider 模块和一个 css 模板，我需要修改它以将图像放置在 slider 的顶部，从而为底部制作一个圆形框架。

#slide-outer_[MODULEID] {
  position: relative;
  top: 0;
  bottom: 0;
  height: 100%;
  left: 0;
  right: 0;
  width: 100%;
  background: #000 url('[PATH]/Slider-Foreground.png') no-repeat;
  z-index: 999;
}

这里是 the page

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

谢谢， 标记

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>