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>

哪些显示默认按钮（带有渐变的twitter按钮和fb共享蓝色图标），但现在我想只有两个灰色背景，没有那些图像......我该如何自定义它们？

我尝试使用他们的选择器自定义CSS，但图像总是覆盖我的css background-color。

Answer 1

将#facebook-share div的css opacity属性设置为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上使用背景图像，并使用您喜欢的任何图像按钮。

自定义twitter和fb共享按钮图像

1 个答案: