1

Twitterでリツイートしたりお気に入りに追加したりすると、ツイートを含むdivの隅にアイコン付きの小さな色付きの三角形が表示されます。TwitterからCSSとスプライトシートをコピーして自分のサイトで再作成しようとしましたが、計画どおりにはいきませんでした（まったく同じ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 は、MozillaDeveloperNetworkを参照してください。

さらに、dogear貼り付けたコードからわかることとは別に、クラスを使用しています。これは、スタイルシートのクラス定義を見ると、表示しないように指示されています。display: none;

于 2012-06-07T18:38:51.183 に答える