2014-12-02 3 views
0

이 내가 무엇을 가지고 :장소 사업부 국경 뿅

enter image description here

는 그러나, 나는 텍스트 아래에 그림자가 국경의 상단에 표시되지 싶습니다. 제목의 '위치'가 '절대'또는 '고정'이외의 값으로 설정되면이 효과를 얻을 수 있지만 나중에 애니메이션에서 유연성을 잃게됩니다.

또한
.feature { 
height: 300px; 
width: 100%; 
background-image: url("http://conceptartworld.com/wp-content/uploads/2013/06/The_Last_of_Us_Concept_Art_Crows_JS-01.jpg"); 
background-size: cover; 
background-repeat: no-repeat; 
overflow: hidden; 
border-bottom: solid 5px #FFFFFF; 
box-shadow: 0 2px 10px #333; 
} 

.feature h1 { 
position: fixed; 
font-size: 120px; 
vertical-align: text-bottom; 
color: #FFFFFF; 
margin-left: 50px; 
font-family: "oswald", sans-serif; 
font-weight: 400; 
text-transform: uppercase; 
text-shadow: 4px 4px 5px rgba(0,0,0,0.5); 
transition: margin 0.5s; 
} 

#moral { 
margin-top: 160px; 
} 

#studios { 
margin-top: 160px; 
margin-left: 400px; 
} 

가 ... 내 수직 정렬 텍스트 하단 작동하지 않습니다 ... 나는 위쪽 여백을 사용하는 이유 즉은 .. 사람이 말해 왜 수 있습니다 : 여기

내 코드?

아르 멘은

+0

테두리 선을 독립적 인 요소로 만들지 않으면이 효과를 낼 수 없다고 생각합니다.


으로 구현하고 Z- 색인을 텍스트보다 크게 설정하십시오. –

+0

트릭을 만들었습니다. 감사. –

+0

답변으로 게시 할 수 있습니까? –

답변

0

난 당신이 경계선에게 독립적 인 요소를하지 않고이 효과를 만들 수 없다고 생각한다. <hr/>으로 구현하고 z- 색인을 텍스트보다 크게 설정하십시오.