1

疑似コンテンツに適用する透明度のある画像スプライトを使用しています。画像の周りに色付きの丸い境界線が必要です。

これは私がこれまでに持っているものです: http://codepen.io/anon/pen/bpmGaz

<div class="icon"></div>

.icon:after {
  content: "";
  display: inline-block;
  background-color: gold;
  background-image: url(http://orig00.deviantart.net/1110/f/2014/143/9/b/mega_man_hd_sprites__transparent_background__by_lunodevan-d7jgruq.png);
  background-position: -129px -40px;
  height: 100px;
  width: 100px;

}

.icon {
  margin: auto;
  margin-top: 100px;
  position: relative;
  width: 100px;
}

.icon:before {
  content: "";
  display: inline-block;
  background: gold;
  position: absolute;
  top: -50px;
  left: -50px;
  width: 200px;
  height: 200px;
  z-index: -1;
  border-radius: 100%;
}

ここに画像の説明を入力

ただし、次のようにする必要があります。

ここに画像の説明を入力

追加の疑似コンテンツ (以下を参照) を使用してこれを行うことができますが、コードが少し乱雑になっています。これを行うためのより短い方法はありますか？

http://codepen.io/anon/pen/VaEwQy

.icon:after {
  content: "";
  display: inline-block;
  background-color: gold;
  background-image: url(http://orig00.deviantart.net/1110/f/2014/143/9/b/mega_man_hd_sprites__transparent_background__by_lunodevan-d7jgruq.png);
  background-position: -129px -40px;
  height: 100px;
  width: 100px;

}

.icon {
  margin: auto;
  margin-top: 100px;
  position: relative;
  width: 100px;
}

.icon:before {
  content: "";
  display: inline-block;
  background: gold;
  position: absolute;
  top: -50px;
  left: -50px;
  width: 200px;
  height: 200px;
  z-index: -1;
  border-radius: 100%;
}

アウトライン プロパティを使用してみましたが、残念ながら、border-radius を使用したクロス ブラウザーでは機能しません。

4

1 に答える 1

1

このコードを疑似要素に追加すると、うまくいくようです：

border: 50px solid gold;
border-radius: 100%;

http://codepen.io/anon/pen/aNRzmE

于 2016-04-27T17:46:40.643 に答える