내 박스 섀도우가 이미지로 덮여 있습니다

Question

여기에서 http://jsfiddle.net/nqugcutn/을 보면 내 머리글의 상자 그림자가 이미지 배경이있는 콘텐츠로 덮여 있음을 알 수 있습니다. (실종 폰트). 상자 그림자가 나타나게하려면 어떻게해야합니까?

/* Header */ 

.header { 
    background: linear-gradient(#ffffff, #f5f5f5); 
    width: 100%; 
    margin-top: 0; 
    height: 75px; 
    border-top: 5px solid #1379DB; 
    box-shadow: 1px 1px 5px #000; 
    z-index: 1; 
} 

.logoName { 
    color: #000; 
    font-family: Lobster, sans-serif; 
    font-size: 30px; 
    margin: 20px 20px; 
    float: left; 
} 

/* Content */ 

.container { 
    background-image: url(http://i.imgur.com/ScGxG2b.png); 
    background-size: cover; 
    background-color: #242424; 
    height: 1000px; 
    width: 100%; 
    z-index: 2; 
} 

미리 감사드립니다.

Answer 1

.header div에 position: relative;을 추가하면 상자 그림자가 배경 이미지 위에 나타납니다. 여기 데모는 다음과 같습니다

/* Header */ 
 

 
.header { 
 
    background: linear-gradient(#ffffff, #f5f5f5); 
 
    width: 100%; 
 
    margin-top: 0; 
 
    height: 75px; 
 
    border-top: 5px solid #1379DB; 
 
    box-shadow: 1px 1px 5px #000; 
 
    z-index: 1; 
 
    position: relative; 
 
} 
 
.logoName { 
 
    color: #000; 
 
    font-family: Lobster, sans-serif; 
 
    font-size: 30px; 
 
    margin: 20px 20px; 
 
    float: left; 
 
} 
 
.header ul { 
 
    list-style-type: none; 
 
    margin-top: 20px; 
 
    margin-right: 250px; 
 
    float: right; 
 
} 
 
.header ul li { 
 
    display: inline-block; 
 
    font-family: Montserrat, sans-serif; 
 
    color: #333; 
 
    font-size: 20px; 
 
    padding: 10px 10px; 
 
} 
 
.header ul li a { 
 
    font-family: Montserrat, sans-serif; 
 
    color: #333; 
 
    font-size: 20px; 
 
} 
 
.header ul li a:hover, 
 
.header ul li a:active { 
 
    border-bottom: #1379DB solid; 
 
    color: #000; 
 
} 
 
.header ul li a:link { 
 
    text-decoration: none; 
 
} 
 
/* Content */ 
 

 
.container { 
 
    background-image: url(http://i.imgur.com/ScGxG2b.png); 
 
    background-size: cover; 
 
    background-color: #242424; 
 
    height: 1000px; 
 
    width: 100%; 
 
    z-index: 2; 
 
}

<div class="header"> 
 
    <h1 class="logoName">Company Name</h1> 
 
    <ul> 
 
    <li><a href="#">Home</a> 
 
    </li> 
 
    <li><a href="/showcase">Showcase</a> 
 
    </li> 
 
    <li><a href="/message">Contact Us</a> 
 
    </li> 
 
    </ul> 
 
</div> 
 
<div class="container"> 
 
</div>

jsFiddle demo.