设计切割时如何去除空白区域（css）

Question

HTML：

.test {
background: #000 url('../img/bg.png');
background-repeat: no-repeat;
background-position: left;
text-indent: 17px;
color:#FFFFFF;
border: none; 
padding: 0 0 0 10px; 
top: 0;  
outline: none; 
font-size: 22px; 
position: relative; 
width: 100%; 
height: 50px;
} 

的CSS：

left:20px;

看起来像这样：

如何使它像这张照片：

我试过了：

left:20px;

但是当设计剪切（响应式设计）时，我的搜索形式如下：{{1}}我有20px的空白区域，如何在设计剪切时删除这个20px的空白空间？

Answer 1

设置background-position: 20px center;

.test {
    background: #000 url('../img/bg.png');
    background-repeat: no-repeat;
    background-position: 20px center;
    text-indent: 37px;
    color:#FFFFFF;
    border: none; 
    padding: 0 0 0 10px; 
    top: 0;  
    outline: none; 
    font-size: 22px; 
    position: relative; 
    width: 100%; 
    height: 50px;
}