사용자 정의 트위터와 FB 공유 버튼 이미지

Question

내 페이지에이 코드했습니다 :

<a href="https://twitter.com/share" class="twitter-share-button" data-url="<?php echo $refLink; ?>" data-text="my text data" data-via="testdata" data-lang="it" data-size="large" data-count="none" data-dnt="true">Tweet</a> 
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> 
</div> 


<a name="fb_share" type="button" 
share_url="<?php echo $refLink; ?>" id="facebook-share">Facebook</a> 
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"> 
</script> 

디스플레이 기본 버튼 (그라데이션 및 FB 공유 파란색 아이콘과 트위터 버튼)을,하지만 지금은 내가하고 싶습니다 그 이미지가없는 단순한 회색 배경이 2 개 있습니다 ... 어떻게 사용자 정의 할 수 있습니까?

CSS를 사용자 지정하여 선택기를 사용해 보았지만 이미지가 항상 내 CSS background-color을 무시합니다.

Answer 1

# facebook-share div의 CSS 불투명도 속성을 0으로 설정 한 다음 적절한 배경색으로 다른 div를 배치하십시오.

예 :

<div id="fb-wrap"><a name="fb_share" type="button" 
share_url="<?php echo $refLink; ?>" id="facebook-share">Facebook</a></div> 

css: 
#fb-wrap{ 
    background-color: #foo; 
} 
#facebook-share{ 
    opacity: 0; 
} 

물론, 래퍼 div의 배경 이미지를 사용하고 버튼에 대해 원하는 이미지를 사용할 수 있습니다.