Question

我正在使用iCheck来设置我的支票和收音机方框。我想让收音机盒的背景变白。目前它是透明的，看起来像这样：

我认为编辑blue.png图片

可能是个好主意

并将背景从透明变为白色。但现在，收音机盒不再光滑了。这就是它现在的样子：

有没有更简单/更好的方法将背景更改为白色？我真的需要编辑blue.png吗？

以下是生成图片的代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Test</title>
    <link rel="stylesheet" href="/resources/vendor/icheck-1.x/skins/square/blue.css">
    <style>
    span{
      margin-left: 10px;
      color:#FFF;
    }
    label{
      background-color: #08C;
      border-radius:20px;
      padding: 20px;
      display: inline-block;
    }
    </style>
  </head>
  <body>
    <label for='name' >
      <input type="radio" name='name' id='name'><span>Select this name</span>
    </label>
  </body>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
  <script>window.jQuery || document.write('<script src="/resources/vendor/jQUery/jquery-1.11.2.min.js"><\/script>')</script>
  <script src='/resources/vendor/icheck-1.x/icheck.js'></script>
  <script>
    $(document).ready(function(){

      $('input').iCheck({
        checkboxClass: 'icheckbox_square-blue',
        radioClass: 'iradio_square-white',
        increaseArea: '20%', // optional
      });
    });
  </script>
</html>

修改以下是修改后的blue.png

您可以下载未压缩的图片here。

Answer 1

最简单的方法是更改这些复选框图形的样式而不是更改这些图像。使用radial-gradient或border-radius跟随blue.css中的选择器生成圆圈，可以在CSS中实现类似的效果，但最好还是编辑主题本身的图形。

您的图片看起来并不平滑，因为您以删除抗锯齿的方式填充了背景。

此处的blue.png和blue@2x.png已完成背景，并使用GIMP保留抗锯齿功能。

请注意，您的风格很难在白色背景下看到。

Answer 2

确定要比更改png简单得多。

通过在我自己的css文件中添加以下内容，我为.icheckbox_square-xxx，.iradio_square-xxx中想要的颜色添加了背景色。

.icheckbox_square-grey, .iradio_square-grey {
   background-color: white;
}

iCheck radiobox有白色背景

2 个答案: