Skip to content

Instantly share code, notes, and snippets.

@hiloki
Created April 14, 2014 14:41
Show Gist options
  • Save hiloki/10654284 to your computer and use it in GitHub Desktop.
Save hiloki/10654284 to your computer and use it in GitHub Desktop.
Sprite
/* Sprite */
.btn-login {
display: inline-block;
width: 528px; /* 使いたい画像のサイズ */
height: 82px; /* 使いたい画像のサイズ */
background-image: url(data:image/png;base64,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);
background-position: 0 0;
background-repeat: no-repeat;
}
.btn-login:hover {
background-position: 0 -82px;
}
/* Image Replacement */
<a href="#" class="btn-login ir">ログインしてはじめる</a>
// alert('Hello world!');
{"view":"split","fontsize":"160","seethrough":"","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment