Question

当您在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，我打算更改类名，并添加一些，所以它不完全相同。是否可以使这种效果起作用？

谢谢：）

Answer 1

您需要向包含狗耳的元素添加更大的z-index属性，以使其显示在您希望它重叠的元素的顶部。

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

您可以在z-index on the Mozilla Developer Network上阅读更多内容。

此外，您使用的dogear类与我从您粘贴的代码中分辨出的内容完全隔离。如果您查看样式表中的类定义，则会被告知不显示：display: none;

有没有办法在Twitter上重新创建CSS狗耳效应？

1 个答案: