html - 如何在 slider 下方插入阴影

Question

我的 asp.net 页面中有以下 slider :

<div class="sliderContent">
<div id="sliderFrame">
    <div id="slideIT" class="sliderHolderMain">
    <div u="slides" class="sliderHolder">
        <div>
            <img u="image" src="theImages/slider/1.jpg" />
            <div u="caption" t="CLIP|L" class="sliderCapMain">
                <div class="sliderCapBG"></div>
                <div class="sliderCapText">
                    <span class="sliderCapTextHdr">Healthy Cooking</span>
                    <br />
                    <span class="sliderCapTextFtr">Discover simple solutions to cook delicious and healthy meals for you and your family. Cooking tips, how-to guides and more!</span>
                </div>
            </div>
        </div>
        <div>
            <img u="image" src="theImages/slider/2.jpg" />
            <div u="caption" t="CLIP|L" class="sliderCapMain">
                <div class="sliderCapBG"></div>
                <div class="sliderCapText">
                    <span class="sliderCapTextHdr">Healthy Cooking</span>
                    <br />
                    <span class="sliderCapTextFtr">Discover simple solutions to cook delicious and healthy meals for you and your family. Cooking tips, how-to guides and more!</span>
                </div>
            </div>
        </div>
    </div>

    </div>
    <div style="width: 1100px; min-width: 1000px; height: 10px; background: url(theImages/dropShadow.png) repeat-x; position: relative; margin: 0 auto; bottom: 0;"></div>
</div>
</div>

CSS:

.sliderContent
{
    width: 100%;
    overflow: hidden;
    margin: 0 auto;
    text-align: center;
}
#sliderFrame 
{
    position: relative;
    width: 100%;
    margin: 0 auto; /*center-aligned*/
}
.sliderHolderMain
{
    position: relative;
    margin: 0px;
    padding: 0px;
    float: left;
    top: 0px;
    left: 0px;
    width: 1100px;
    height: 337px;
    overflow: hidden;
}
.sliderHolder
{
    cursor: move;
    position: absolute;
    left: 0px;
    top: 0px;
    width: 1100px;
    height: 337px;
    overflow: hidden;
}
.sliderCapMain
{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 300px;
    height: 337px;
    text-align: center;
}
.sliderCapBG
{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.75);
    filter: alpha(opacity=75);
}
.sliderCapText
{
    position: absolute;
    top: 5%;
    left: 5%;
    color: #000;
    text-align: left;
}
.sliderCapTextHdr
{
    color: #0074C9;
    font-weight: normal;
}
.sliderCapTextFtr
{
    color: #000;
    font-size: small;
}

附上它的外观图片:

如您所见，阴影位于红色箭头所指的 slider 顶部。

如何修改 CSS 使其显示在 slider 下方，使其具有 3D View

Answer 1

2 种方式:在您的 HTML 中，您有一个内联样式 (eeeeew!!!)，如下所示:

<div style="width: 1100px; min-width: 1000px; height: 10px; background: url(theImages/dropShadow.png) repeat-x; position: relative; margin: 0 auto; bottom: 0;"></div>

同时，您的 slider 具有固定高度，因此很容易知道大小。

因此您可以执行以下操作:

1) 删除内联样式。真的。

2) 向那个 div 添加一个类，比方说 .shadow

3) 将以下样式添加到您的 CSS 样式表中:

.shadow{
    width: 1100px;
    min-width: 1000px;
    height: 10px;
    position: relative;
    margin: 0px auto;
    top: 327px; //it was originally 327 but corrected to 337
    background: url('theImages/dropShadow.png') repeat-x scroll 0% 0% transparent;
    }

3.a) 现在您可以使用现有的 .png 图像(但您必须垂直翻转它)

3.b) 或者你可以使用 box-shadow 属性:

.shadow{
    width: 1100px;
    min-width: 1000px;
    height: 10px;
    position: relative;
    margin: 0px auto;
    top: 327px; //it was originally 327 but corrected to 337
    box-shadow: -20px -5px 6px rgba(0, 0, 0, 0.75) inset;
}

编辑:我看到您编辑了我的答案，并且以某种方式批准了编辑，但编辑不正确，所以我将对其进行解释，以便您也了解其工作原理:顶部位置是容器 元素的高度 (337px) 减去带阴影的 div 的高度 (10px)，因此位置为 327px。如果你想要一个高度为(比如)50px 的阴影 div，那么位置将是 287px (337-50) 等等。解释这个是因为这个答案可能对您有帮助，但对其他人也有帮助，并且更正此问题将导致整个解决方案无法正常工作(字面上消失在视线之外)