このような画像がある場合(たとえば):
(出典:tiscali.it)
私のWebサイトの背景要素が多い場合、cssプロパティを持つ単一の要素をどのように抽出できますか?
「CSS スプライト」メソッドを使用する必要があります。これは、指定された要素ブロック幅を作成する必要があることを意味しますwidth
and height
、次にそれにbackground-image
沿ってbackground-position
andを指定しbackgorund-url
、ボックスの外に出るすべてを非表示にしますoverflow:hidden;
たとえば、このチュートリアルへの参照、そこで十分に説明されています: CSS スプライト リンク
CSS スプライトを使用する
http://www.google.de/search?q=css+sprites
画像の例 http://jsfiddle.net/qxVf8/
<div class="sprite sprite1">
</div>
.sprite {
background: url(http://www.tiscali.it/v007/img/el.v004.png) 0 0 transparent;
}
.sprite1 {
width: 79px;
height: 28px;
background-position: -0px -305px;
border: 1px solid magenta;
}
そのためにcssスプライト技術を使用できます。