調整自動寬度的背景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 – 2012-03-27 07:16:11

它這樣做，因爲你的PNG的角落是透明的。要麼使它們變白（與背景相同）或使用其他方法。大多數現代瀏覽器允許你現在通過CSS做圓角邊框（IE除外）。

來源

2012-03-27 07:19:34 SpliFF

可以使同樣的曲線框，每用CSS3在這裏你的形象是小的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/

我已經使用行爲黑客對IE的支持邊界半徑屬性，以便對即邊框細節，你可以閱讀這篇文章..... cross browsers css3 border radius

來源

2012-03-27 09:01:38

調整自動寬度的背景div

回答

相關問題