如何去除圖像周圍的空白？

Question

我試圖使用這個圖像作爲導航欄的一部分，但問題是圖像周圍有大的空白，我不能刪除它。我試過將margin和padding設置爲0，它不起作用。

這是什麼樣子：

UPDATE：HTML & CSS代碼

HTML

CSS

月2日更新

我終於解決了問題傢伙..謝謝大家誰幫助！

Answer 1

你可以使用CSS和玩的background-size & background-position特性，如：

div.image { 
 
    width: 100px; 
 
    height: 100px; 
 
    background-image: url('https://i.stack.imgur.com/sOO9j.png'); 
 
    background-size: 700px 700px; 
 
    background-position: 419px 438px; 
 
    border: 1px solid red; 
 
}

<div class="image"></div>

使用的GIMP圖像編輯器我已經不完整將原始圖像和使用，作爲相反，這是它的樣子：

div.image { 
 
    width: 100px; 
 
    height: 100px; 
 
    background-image: url('https://i.stack.imgur.com/MaYMF.png'); 
 
    background-size: 120%; 
 
    background-position: 112px 115px; 
 
    border: 1px solid red; 
 
}

<div class="image"></div>

您在上面提供的圖像太大，這意味着當您裁剪它時裁剪的圖像將是低質量的圖像。我敢肯定它會容易得多，如果你使用像Gimp Image Editor或Photoshop這樣的軟件來修改你的圖像，你就可以得到你想要的像素的特定圖像，並且可以簡化我的CSS以得到它：

div.image { 
    width: 100px; 
    height: 100px; 
    background-image: url('https://i.stack.imgur.com/sOO9j.png'); 
    background-size: 100% 100%; 
    background-position: center center; 
    border: 1px solid red; 
} 

備註：紅色邊框用於幫助您更好地查看圖像的位置。
注意：紅色邊框是而不是需要做這項工作。

Answer 2

你可以嘗試裁剪圖像。否則，你可以使用CSS。

例如：

<style> 
    img { 
     position: absolute; 
     clip: rect(0px,60px,250px,10px); 
    } 
</style>