2016-06-07 26 views
0

我使用iCheck風格我的檢查和收音機框。我想讓收音機的背景變成白色。目前,它的透明,看起來像這樣:iCheck射頻盒與白色背景

enter image description here

我想這可能是編輯blue.png圖像

enter image description here

,併到後臺,從透明變爲白色是個好主意。但現在,收音機箱子不再圓滑了。這是現在的樣子:

enter image description here

有沒有更簡單/更好的辦法來改變背景爲白色?我真的需要編輯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

enter image description here

您也可以下載壓縮前的圖像here

+0

你有一個現場演示的地方? – Frutis

+0

@Frutis對不起,我在本地桌面上使用XAMPP。我無法設置jFiddle,因爲我不知道如何導入icheck依賴關係。 – Adam

+0

你可以上傳你修改過的blue.png並添加到問題中嗎? –

回答

2

最簡單的改變那些複選框圖形的風格,而不是改變那些圖像。使用radial-gradientborder-radius跟隨blue.css中的選擇器生成一個圓圈,但可以在CSS中實現類似的效果,但最好編輯主題圖形。

您的圖像看起來並不平滑,因爲您以消除抗鋸齒的方式填充背景。

這裏的blue.png[email protected]背景填充爲你已經完成的,使用GIMP保留抗鋸齒。

請注意,您的風格很難在白色背景中看到。

blue.png

blue@2x