어떻게 이미지 아래에 경계선을 넣으시겠습니까?

Question

내 문제에 대한 해결책을 찾을 수 없으므로이 주제를 게시했습니다. 누군가가 나를 도울 수 있기를 바랍니다.

하는 이미지 위에 부착한다. "제공되는 서비스"에서 이미지 오버레이 경계선. 나는 시도했지만 이렇게 할 수는 없다. 여기에 내 코드 :

http://codepen.io/thehung1724/pen/iykFu

희망 누군가가 나를 도울 수 있습니다. 미리 감사드립니다. 당신은 대신과 같이, CSS에 라인에서 현재 앉아있다 PNG 배치해야

Answer 1

나는 당신의 요점을 잘 모르겠지만, 내가 옳다면 나는 두 줄을 사용하는 것이 좋습니다.

&:before,&:after{ 
    border-top: 1px solid #999; 
    content: ''; 
    position: absolute; 
    top: 42%; 
    width: 30%; 
} 
&:before{ 
    left: 50%; 
margin-left: 20px; 
} 
&:after{ 
    right: 50%; 
margin-right: 20px; 
} 

http://codepen.io/anon/pen/Bovgm

Answer 2

:

.medium-seperator { 
    background:url('transparent.png') repeat-x #c00; 
    height:25px; 
    display:block; 
} 

를 대신 이미지가 나타나도록 한 후 라인을 넣어 위에 :

&:after{ 
    margin: 0 auto; 
    border-top: 1px solid #fff; 
    content: ''; 
    position: absolute; 
    top: 42%; 
    width: 80%; 
    left: 0; 
    right: 0; 
} 

이 방법을 사용하면 찾고있는 라인에서 갭을 얻을 수 있습니다. 또는 테두리 및 작은 아이콘에 대해 하나의 이미지 만 만들면됩니다. 거기에 경계선을 생성해야하는 이유가 확실하지 않습니다. 모든 것을 png로 만드십시오.