슬라이더 아래에 그림자를 삽입하는 방법

Question

나는 내 asp.net 페이지에서 다음 슬라이더를 가지고 :

<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; 
} 

가 어떻게 생겼는지의

첨부 이미지 :

빨간색 화살표가 가리키는 슬라이더 상단에 음영이 있음을 알 수 있습니다. 그것은 3D 뷰에게 그것을

Answer 1

2 가지 방법을 제공 슬라이더 아래에 나타납니다 그래서 나는 CSS를 수정하는 방법

: 당신의 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> 

동시에 슬라이더의 높이가 고정되어 있으므로 크기를 쉽게 알 수 있습니다.

그래서 다음과 같은 작업을 수행 할 수 있습니다

1) 인라인 스타일을 제거합니다. 정말. 지금 당신은 당신이 무엇을 사용할 수 있습니다)

.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 :

2)의 당신의 CSS 스타일 시트에 다음과 같은 스타일을 추가)

3 .shadow 말을하자, 그 DIV에 클래스를 추가 자, .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 높이를 뺀 (10 픽셀)이므로 위치는 327 픽셀입니다. 50px 높이의 그림자 div를 원한다면 위치는 287px (337-50)가됩니다. 이 대답은 당신뿐만 아니라 다른 사람들에게도 도움이 될 수 있기 때문에 이것을 설명하면이 해결책이 작동하지 않는 전체 해결책으로 끝날 것입니다 (글자 그대로 사라짐).