CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSイメージスプライトを作成して使用する方法

CSS Image Spriteは、ドキュメントページ内のすべての画像を組み合わせた画像ファイルです。画像リソースは一度だけロードする必要があるため、画像スプライトが付属していると便利です。 CSSの背景を使用して、結合された画像のさまざまな部分を表示できます。

CSS画像スプライトの例を見てみましょう-

例

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.sprite {
   background: url("Capture.png") no-repeat;
   width: 280px;
   height: 200px;
   display: inline-block;
}
.flag1 {
   background-position: 0px 0px;
}
.flag2 {
   background-position: -255px 0px;
}
.flag3 {
   background-position: -510px 0px;
}
.flag4 {
   background-position: -765px 0px;
}
body {
   text-align: center;
}
</style>
</head>
<body>
<div><h1>Flag Image Sprite</h1></div>
<div class="sprite flag1"></div>
<div class="sprite flag2"></div>
<div class="sprite flag3"></div>
<div class="sprite flag4"></div>
</body>
</html>

出力

CSSイメージスプライトを作成して使用する方法


  1. CSSでスティッキーイメージを作成するにはどうすればよいですか？

    以下は、CSSでスティッキーな画像を作成するためのコードです- 例 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> img {    position: sticky;    top: 0;    width: 300px;    height: 300

  2. CSSを使用して白黒画像を作成する方法

    CSSのfilterプロパティにグレースケール値を指定することで、白黒画像を作成できます。フィルタプロパティを使用して、画像にぼかしやドロップシャドウなどの特殊効果を適用できます。 構文 CSSフィルタープロパティの構文は次のとおりです- Selector {    filter: grayscale(100%);    -webkit-filter: grayscale(100%); } 例 次の例は、CSSフィルタープロパティを示しています。 <!DOCTYPE html> <html>    <