изменить размер фона в авто ширину div - PullRequest
Новая
       11

изменить размер фона в авто ширину div

0 голосов
/ 27 марта 2012

Я создаю любой 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 в действии: ЗДЕСЬ Моя проблема: ЗДЕСЬ

Ответы [ 2 ]

2 голосов
/ 27 марта 2012

Это происходит потому, что углы вашего PNG прозрачны. Либо сделайте их белыми (как фон), либо используйте другой метод. Большинство современных браузеров теперь позволяют вам делать скругленные границы с помощью CSS (за исключением IE).

1 голос
/ 27 марта 2012

вы можете сделать такой же блок кривой, как на вашем изображении, с помощью 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/

Я использовал поведение взломать, например, для поддержки свойства радиуса границы, поэтому для деталей о границе вы можете прочитать эту статью ..... кросс-браузерырадиус границы css3

...