Question

我创建了具有单个图像背景的自动宽度的任何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

Answer 1

这样做是因为PNG的角落是透明的。要么使它们变白（与背景相同），要么使用其他方法。大多数现代浏览器允许您现在通过CSS执行圆形边框（IE除外）。

Answer 2

你可以根据你的图像制作相同的曲线框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/

我使用行为 hack来支持边界半径属性，所以对于边框细节你可以阅读这篇文章..... cross browsers css3 border radius

调整自动宽度div中的背景

2 个答案: