1

当您在 Twitter 上转发或收藏时，一个带有图标的小彩色三角形会出现在包含该推文的 div 的角落。我从 Twitter 复制了 CSS 和 sprite 表，并尝试在我的网站上重新创建它，但它并没有完全按计划进行（三角形根本没有使用完全相同的 CSS 出现）。那么，如何在我的网站上的 div 的角落添加三角形“狗耳朵”效果？

这是我从 Twitter 复制的代码：

.dogear {
  position:absolute;
  top:0;
  right:0;
  display:none;
  width:24px;
  height:24px;
}

.retweeted .dogear {
  background-position:0 -450px;
}

.favorited .dogear {
  background-position:-30px -450px;
}

.retweeted.favorited .dogear {
  background-position:-60px -450px;
}

.retweeted .dogear,.favorited .dogear,.retweeted.favorited .dogear{
  display:block;
}

i {
  background-image: url("../sprite.png") !important;
  display: inline-block;
  vertical-align: text-top;
  background-image: url("../sprite.png");
  background-position: 0px 0px;
  background-repeat: no-repeat;
}

并使用以下方法插入 HTML：

<i class="dogear"></i>

我更改了精灵表 URI，我打算更改类名，并添加一些，所以它不完全相同。是否有可能使这种效果起作用？

谢谢 ：）

4

1 回答 1

1

您需要为z-index包含折耳的元素添加一个更大的属性，以便它出现在您希望它看起来重叠的元素的顶部。

z-index用于控制绝对定位、相对定位或固定定位的元素的堆叠顺序。

z-index 您可以在 Mozilla Developer Network 上阅读更多信息。

此外，您正在使用dogear该类，而我从您粘贴的代码中可以看出这一点。如果您查看样式表中的类定义，则会被告知不显示：display: none;

于 2012-06-07T18:38:51.183 回答