将 Pin it 按钮放置在 Pinterest 插件的图像顶部

Posted 2023-03-06

【中文标题】将 Pin it 按钮放置在 Pinterest 插件的图像顶部

【英文标题】：Position Pin it button on top of the image for Pinterest Plugin

【发布时间】：2012-10-11 03:00:34

【问题描述】：

我正在尝试在我的博客中使用 Pinterest 插件，它应该在我的帖子中的任何图像顶部显示一个 PinIt 按钮。我像往常一样安装了所有东西，但不是位于图像顶部的按钮，而是单独存在并且图像向下移动。我正在使用样式 position:relative;，但它并没有像我想要的那样工作。 您可以在我的博客中看到它：http://www.thehibou.com/

【参考方案1】：

变化：

.sn_pin 
    background: url("http://www.thehibou.com/wp-content/uploads/2012/10/pinit-button.png") repeat scroll 0 0 transparent;
    bottom: 0;
    display: block;
    float: right;
    height: 117px;
    margin: -147px 0 0;
    opacity: 1 !important;
    position: relative;
    right: 0;
    width: 113px;
    z-index: 999;

.sn_pinterest .sn_pin 
    display: none;
    position: relative;

.sn_pinterest:hover .sn_pin 
    display: block;
    position: relative;

.sn_pinterest:hover 
    opacity: 0.75 !important;
    position: relative;

收件人：

.sn_pin 
    background: url("http://www.thehibou.com/wp-content/uploads/2012/10/pinit-button.png") repeat scroll 0 0 transparent;
    display: block;
    height: 117px;
    margin: -147px 0 0;
    opacity: 1 !important;
    position: absolute;
    right: 0;
    width: 113px;
    z-index: 999;

.sn_pinterest .sn_pin 
    display: none;

.sn_pinterest:hover .sn_pin 
    display: block;

.sn_pinterest:hover 
    opacity: 0.75 !important;

简单回顾一下：删除所有 position: relative; 但将顶部的位置换成绝对位置。同时删除 bottom: 0; 和 float: right;

希望这会有所帮助；）

【讨论】：

非常感谢！！！有效！现在唯一的问题是它位于右上角，而我希望它位于右下角？我在哪里改变它？

您有机会尝试我的第二个答案吗？那应该将 pinterest 按钮定位在图像的右下角；）

【参考方案2】：

要让它在右下角，添加另一个 CSS 规则：

.sn_pinterest 
    position: relative;
    overflow: hidden;

然后将 bottom: 0px; 添加到 .sn_pin

希望这会有所帮助；）