배경 이미지 수평 바깥 쪽 상자의 상자

Question

나는 배경 이미지가 요소의 상자 밖으로 나갈 수 없다는 것을 알고있다. 그러나 이것은 나의 경우입니다.

나는 각 목록 항목이 작은 아치가 항목 위에 앉아있는 호버 효과가 있어야하는 가로 목록을 가지고 있습니다. 목록 항목이 텍스트만큼이나 높기 때문에 배경을 배치하는 것은 효과가 없습니다. 상자 바깥에있는 것들은 잘립니다.

방금 ​​이미지를 보유하고있는 각 목록 항목 내에 추가 요소가있는 솔루션에 대해 읽었습니다.

단순히 목록 항목의 높이를 변경하는 방법이 있습니까? 예 : 배경 이미지가 상자 안에 머무르도록 상자를 더 높게 만드시겠습니까?

Answer 1

이 답변을 찾으십니까?

http://jsfiddle.net/fmpeyton/G5VVj/1/

HTML :

<ul> 
    <li><a href="#">Page1</a></li> 
    <li><a href="#">Page2</a></li> 
    <li><a href="#">Page3</a></li> 
    <li><a href="#">Page4</a></li> 
    <li><a href="#">Page5</a></li> 
</ul> 

CSS :

li{height: 50px; width:30px; margin:0 10px; float:left; list-style:none;} 
li:hover{background: url('http://www.dreamtemplate.com/dreamcodes/web_icons/gray-bold-up-arrow-icon.png') top center no-repeat;} 
a{padding:20px 0; display:block;} 

전략이 ​​요소 내에 요소를 가지고 부모 요소에게 배경을 변경하는 :hover 의사 클래스를 제공하는 것입니다

호버에 걸렸을 때.