Question

我正在使用jcarousel来显示幻灯片like，但我希望在单个图片上显示一个链接而不是全部我试过像

<div id="contSlider_search" style="float:left;height:300px;width:600px;height:400px;border:1px solid #2B7FD5;">
                    <img src="images/arPrev.png" class="previous" />
                    <img src="images/arNext.png" class="next" />
                        <ul>
                            <li style="width:600px;height:400px;">
                               <img src="images/images/Search.jpg" height="380" width="580"alt="" class="lft_2" />                  

                            </li>
                           <li style="width:600px;height:400px">
                             <img src="images/images/AdvancedSearch.jpg" height="380" width="580"alt="" class="lft_2" /> 
                             <a href="#"  style="position: absolute; right: 15px; bottom: 100; font-size: 13px; color: #fff; text-shadow: 0 0 1px rgba(0, 0, 0, 0.85); opacity: .66;">sample</a>
                           </li>                                
                       </ul>
</div>

但是noluck，有可能吗？

Answer 1

你需要两件事：

position: relative;在李
bottom: 100px;而不是底部：100;在链接本身。

绝对定位的元素将始终相对于最近的 position: relative 父元素定位，因此它相对于包装器进行了定位。

您的示例代码包含修复程序：

<div id="contSlider_search" style="float:left;height:300px;width:600px;height:400px;border:1px solid #2B7FD5;">
    <img src="images/arPrev.png" class="previous" />
    <img src="images/arNext.png" class="next" />
        <ul>
            <li style="width:600px;height:400px; position: relative;">
               <img src="images/images/Search.jpg" height="380" width="580"alt="" class="lft_2" />                  

            </li>
           <li style="width:600px;height:400px; position: relative; border: 2px solid red;">
             <img src="images/images/AdvancedSearch.jpg" height="380" width="580"alt="" class="lft_2" /> 
             <a href="#"  style="position: absolute; right: 15px; bottom: 100px; font-size: 13px; color: #fff; text-shadow: 0 0 1px rgba(0, 0, 0, 0.85); opacity: .66;">sample link</a>
           </li>                                
       </ul>
</div>

链接jcarousel幻灯片中的图像

1 个答案: