테두리 이미지 겹침 주 이미지 만들기

다양한 크기의 이미지에 CSS3 테두리 이미지 속성을 사용하고 있습니다. 나는 인 - 라인 CSS를 당분간 사용하고있다.테두리 이미지 겹침 주 이미지 만들기

border-image가 주 이미지보다 우선 순위가 높아서 이미지가 예상보다 약간 큰 경우 프레임이 이미지 앞에 표시되도록하고 싶습니다.

감사합니다 ... 나는 그것이 조금 거추장스러운 존재 인라인 CSS를 알고 ...하지만 그것을 시간 인이 방법이

<img alt="Thumb_img_0129" src="/thumb_IMG_0129.jpg" 
style='border-width:15px; padding:10px 10px; 
-moz-border-image:url("/images/fancy-frame.jpg") 30 30 stretch; 
-webkit-border-image:url("/images/fancy-frame.jpg") 30 30 stretch; 
-o-border-image:url("/images/fancy-frame.jpg") 30 30 stretch; 
border-image:url("/images/fancy-frame.jpg") 30 30 stretch;' />

다음은 내 코드입니다!

출처

2012-05-16 user749798

나는 z-postiion과 post를 시도했다 : 상대는 아니지만 어느 쪽도 도움이되지는 않는다. 주 이미지 (Thumb_img)는 국경과 부분적으로 겹치는 것처럼 보입니다. 국경을 우선적으로 원합니다. – user749798

주위에 테두리를 넣으십시오. DIV.

<div style="background-image: url('/thumb_IMG_0129.jpg'); background-repeat: no-repeat;"> 
    <div style='border-width:15px; padding:10px 10px; 
      -moz-border-image:url("/images/fancy-frame.jpg") 30 30 stretch; 
      -webkit-border-image:url("/images/fancy-frame.jpg") 30 30 stretch; 
      -o-border-image:url("/images/fancy-frame.jpg") 30 30 stretch; 
      border-image:url("/images/fancy-frame.jpg") 30 30 stretch;'> 

      <img src='/thumb_IMG_0129.jpg' style='opacity: 0;'/> 

     </div> 
</div>

설명 : 예를 들어 첫 번째 포장 DIV 배경으로 이미지를 얻었다. 그 이상, secon DIV 국경을 그립니다. 마지막으로, 둘 다 안의 이미지는 표시되지만 보이지 않는 이미지는 자동으로 DIV을 이미지 크기로 조정합니다.

출처

2012-05-16 15:12:12

나는 완전히 그것에 대해 확신하지 못합니다. 어쩌면 개선이 필요할 수도 있습니다. –

불행히도 이렇게하면 엄지 손가락이 반복되어 프레임에 부분적으로 만 나타나는 것처럼 보입니다. 배경 이미지를 반복하지 않고 대신 div의 크기까지 늘릴 수있는 방법이 있습니까? – user749798

소스를 편집했습니다. –

테두리 이미지 겹침 주 이미지 만들기

답변

관련 문제