设置背景CSS精灵图像宽度

有没有办法设置背景CSS精灵图像宽度？设置背景CSS精灵图像宽度

<a href="#">shop</a> 

a{ 
    background-image: url(http://placehold.it/60x60/ff0000/000&amp;text=100)!important; 

    background-repeat: no-repeat; 
    display: block;  
    background-position: -5px -5px; 
    padding: 0 0 0 30px; 
}

https://jsfiddle.net/jb1prcro/

现在上面a标签60像素宽，30像素为单词“店”，30像素的填充左为车图标，因为我使用的背景图标的CSS精灵，现在它显示60px的背景图片，而不是我想要显示的30px。

我也尝试过background-size：30px 30px这个标签，但它不起作用。

来源

2017-02-22 Pat

可以使用伪元素before：

a{ 
    display: inline-block;  
    background-position: -5px -5px; 
    padding: 0 0 0 30px; 
    height:30px; 
    vertical-align:middle; 
} 
a:before { 
    background-image: url(http://placehold.it/60x60/ff0000/000&amp;text=100)!important; 
    background-repeat: no-repeat; 
    width:30px; 
    height:30px; 
    display:inline-block; 
    content:''; 
    vertical-align:middle; 
}

工作例如：https://jsfiddle.net/mspinks/jb1prcro/2/

来源

2017-02-22 22:42:55

我不知道你想实现什么，但这里有一个实际的例子：

https://jsfiddle.net/ozL0yzuy/

a { 
    background-image: url(http://placehold.it/60x60/ff0000/000&amp;text=100)!important; 
    background-repeat: no-repeat; 
    display: inline-block; 
    width: 40px; 
    background-position: -10px -20px; 
}

必须为元素本身设置一个宽度（实际上也是一个高度，我没有在这个例子中做过）（在这种情况下，a标签，只有当它的块或内嵌块元素）。然后您可以相应地调整背景位置。

来源

2017-02-22 22:49:11 Johannes

设置背景CSS精灵图像宽度

回答

相关问题