添加没有背景的复选标记图像

Question

我有一个左侧带有标签的页面。 每个选项卡在页面中间打开一个表单。 当用户正确填写表单时，我想在该选项卡上添加一个复选标记。 我尝试了 10 个左右不同的 greencheck.png 文件，但没有一个是透明的。 我想避免复选标记周围的灰色背景。 我错过了什么吗？

<div id="tabs">
 <ul>
   <li><a href="#tabs-1">Account</a><span id='accountSpan'></span></li>
   <li><a href="#tabs-2">Personal</a></li>
   <li><a href="#tabs-3">Opportunity</a></li>
   <li><a href="#tabs-4">Products</a></li>
   <li><a href="#tabs-5">Services</a></li>....

和 jquery 添加复选标记

            $('#accountSpan').html('<img src="/images/greencheck2.png" width="25px">');

结果：

Answer 1

你必须关心png，不是因为它的png内部是透明的。
如果背景中有棋盘格，您必须检查何时找到一个。

您还可以使用图形软件来确保背景是透明的。

 $('#accountSpan').html('<img src="https://findicons.com/files/icons/573/must_have/48/check.png" width="16px">');

 #tabs ul { list-style:none} #tabs ul li { background-color:purple; padding:10px; margin-top:5px } #tabs ul li:first-child { margin-top:0 }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="tabs"> <ul> <li><a href="#tabs-1">Account</a><span id='accountSpan'></span></li> <li><a href="#tabs-2">Personal</a></li> <li><a href="#tabs-3">Opportunity</a></li> <li><a href="#tabs-4">Products</a></li> <li><a href="#tabs-5">Services</a></li> </ul> </div>