자동 너비 div에서 배경 크기 조정 div

단일 이미지 배경으로 자동 너비로 모든 div를 만듭니다. 행동으로 이것은 효과가 있었지만 작은 문제가 있습니다. 오른쪽 이미지의 끝은 겹치지 않습니다.자동 너비 div에서 배경 크기 조정 div

HTML :

<div class="home"><span><em>40</em></span></div>

CSS : 액션에서

.home{ 
      border:none; 
      background:none; 
      padding:0; 
      margin:0; 
      width:auto; 
       overflow:visible;      
      text-align:center;  
      white-space:nowrap;  
      height:40px; 
      line-height:34px; display:inline-block;   
      } 
     .home span, .home em{ 
      display:inline-block; 
      height:40px; 
      line-height:34px;    
      margin:0; 
      color:#954b05; 
      }  
     .home span{ 
      padding-left:15px; 
      background:url(http://www.uploadup.com/di-GRW2.png) no-repeat 0 0; 
      }  
     .home em{ 
      font-style:normal; 
      padding-right:20px; 
      background:url(http://www.uploadup.com/di-GRW2.png) no-repeat 100% 0;}

참조 E.X : HERE 내 문제 : HERE

출처

2012-03-27 Saimon Avazian

이것은 제 문제입니다 : http://www.uploadup.com/di-FIYW.png –

당신의 PNG의 모서리가 투명하기 때문에 것을하고있어. 흰색 (배경과 동일) 또는 다른 방법을 사용하십시오. 대부분의 최신 브라우저에서는 CSS를 통해 둥근 테두리를 사용할 수 있습니다 (IE 제외). 여기 CSS3를 사용하여 이미지에 따라 동일한 곡선 상자를 만들 수 있습니다

출처

2012-03-27 07:19:34 SpliFF

는 모든 브라우저와 곡선 상자와 호환을하는 작은 CSS입니다 : -

.box { 
border:1px solid #dadada; 
width:50px; 
height:50px;  
-webkit-border-radius: 10px; 
-moz-border-radius: 10px; 
border-radius: 10px; 
behavior: url(border-radius.htc); 
}

체크 라이브 데모 : -http://jsfiddle.net/ZysQa/3/

내가 사용하고이 문서를 읽을 수 있습니다 즉, 국경 자세한 내용 있도록 행동 해킹 즉, 지원 국경 반경 속성 ..... cross browsers css3 border radius

출처

2012-03-27 09:01:38

자동 너비 div에서 배경 크기 조정 div

답변

관련 문제