ホームページ >ウェブフロントエンド >CSSチュートリアル >大きな画像から小さな画像をインターセプトする CSS スプライトの分析

大きな画像から小さな画像をインターセプトする CSS スプライトの分析

不言オリジナル: 2018-06-15 09:16:261579ブラウズ

この記事では、CSS スプライトを使用して大きな画像から小さな画像をキャプチャする完全なチュートリアルに関する関連情報を主に紹介します。必要な友達はそれを参照してください。

Web インターフェイスを勉強するのが好きな多くの子供たちは、素晴らしい現象に遭遇したと思います。 Web ページには多数の写真素材が 1 つの写真に結合されています。

Xiaocaiが最初にウェブサイトを模倣したとき、私はこの現象によく遭遇しました。当時はどのようなテクノロジーが利用できたのかわかりませんでした。PSを使用して画像を個別に切り取ることしかできませんでした。分割して使用します。。。

実は、これは非常に単純な技術であるため、問題の鍵が見つかっていないことが想像できます。

CSS カットアウトを実装するには、background-position 属性を 1 つ使用するだけです。

文字通りの理解によれば、この属性は背景の配置です。まず、次のような Google ウェブサイトのマテリアル画像を見てください:

Xiaocai が +1 ボタンを作成したい場合は、マテリアルを使用します。上の図をクリックすると、通常の状態で図 A が表示されます。マウスを上に移動すると、図 B が表示され、ダイナミックな効果が得られます。

ボタンは、通常、クリックイベントに応答するために使用されます。ただし、テキストの長さが異なるため、背景画像をハイパーリンクに直接追加することはできません。ハイパーリンクが変更され、スタイルも変更されました。

地球上の人々の一般的なアプローチは、p にハイパーリンクを配置することです。ハイパーリンクは関数の実装を担当し、p は背景画像をロードする責任を負います。 HTML の構造は次のとおりです。

<p class="btn">
    <a href="<a href="http://www.jb51.net">+1</a">http://www.jb51.net">+1</a</a>>
</p>

HTML スケルトンを使用したら、次のステップは CSS スタイルを記述することです。

何も考慮せず、画像全体を背景として直接設定するとします。スタイルは次のとおりです。

.btn{    background:url(bg.png);}

効果は以下のようになります。

p はブロックレベルの要素であり、1 つを占めます。最初は心配しないでください。しかし、背景画像が繰り返されているのを見ると、これは明らかに私たちが望んでいることではありません。次のように、background-repeat:no-repeat 属性を追加してスタイルを改善します。そうすれば、それが繰り返されることはありません。

p は長方形のボックスとして理解でき、その左上隅が頂点であり、背景画像の頂点も左上隅です。p が背景画像をロードすると、2 つの頂点が重なり、その座標が決まります。頂点は (0,0) です。わからない場合は、図を見てください。非常に簡単です。。。

+1 の小さな画像が大きな画像に混在している場合、この属性は p の頂点をの頂点に移動するのと同じです。対象となる小画像の位置は以下の通りです

このように、pに小画像が表示されます。ただし、表示されるのは小画像だけではなく、画像の網掛け部分です。やるべきですか？ pの幅と高さを設定して、小さな画像の幅と高さを同じにします！！

background-position 属性を見てみましょう。これには、水平方向に移動するピクセルと垂直方向に移動するピクセルという 2 つのパラメーターがあり、どちらも負の数で表されます。全体像が動かない場合、p は右または下にしか移動できません。これらの 2 つの方向に移動するピクセルは負の数で表されることを覚えておいてください。

それでは、大きな画像の左上隅の頂点に対する小さな画像の水平方向の移動ピクセルと垂直方向の移動ピクセルを見つけてください。 Xiaocai は専門的なツールを必要とせず、大きな画像の左上隅からスクリーンショットを撮り始め、ピクセルが表示されたらほぼ同じになります。その後、デバッグを繰り返して、基本的には完了です。

この例では、小さな画像 A の変位は -25px -374px、小さな画像 A のサイズは 24px 16px です。したがって、CSS スタイルは次のようになります:

.btn{    background:url(bg.png);    background-repeat:no-repeat;}

効果は次のようになります:

このようにして、小さな画像が切り抜かれます!単純にする！！

最初に問題を説明します。画像に +1 があり、ハイパーリンクに +1 を書きました。これは、多くの場合、画像にテキストの内容が書き込まれていないためです。、テキストは単なるテキストです。全員に完全なデモンストレーションを提供するために、Xiaocai は別の +1 を作成し、次にそれを扱います。

最初の中央揃えは、水平方向の中央揃えと垂直方向の中央揃えに分けられます。この属性は、p でのハイパーリンクの垂直方向の中央揃えに設定する必要があります。リンクの場合、a タグの line-height 属性を p の高さと同じに設定するだけで済みます。スタイルは次のとおりです:

.btn{
    background:url(bg.png);
    background-repeat:no-repeat;
    background-position:-25px -374px;
    height:16px;
    width:24px;
}

効果は次のとおりです:

次に、別の問題があり、マウスが +1 テキスト上に移動した場合にのみ、マウスが手の形に変化することがわかります。そしてイベントに応答することができます。

これは明らかに私たちが望んでいることではありません。マウスが画像内に移動すると、正確にはマウスが p 内に移動すると、手の形に変化してイベントに応答する可能性があります。

これも簡単で、display:block 属性を a タグ (ハイパーリンク) に追加するだけです。

另外这个下划线比较碍眼，用text-decoration:none;属性去掉，很常见，就不多说了。

样式如下：

.btn{
   background:url(bg.png);
   background-repeat:no-repeat;
   background-position:-25px -374px;
   height:16px;
   width:24px;
   text-align:center;
}
.btn a{
   line-height:16px;
   display:block;
   text-decoration:none;
}

接下来就剩最后一件事了，那就是鼠标移入的时候切换背景。

本例是p里边套a标签，鼠标移入换背景，当然是指鼠标移入p，而且换背景也是换p的背景，可不是a标签的哦！！

因此要在p标签上调用hover，p的样式是btn，因此写成.btn:hover{}。

换背景还需要找到背景图片，这又需要抠小图了，也就是抠上边指出的B图。

刚刚显示的是A小图，B小图和A小图在同一水平线上，因此竖直方向的移动像素是相同的，水平方向差不就是A小图的水平像素加上A小图的宽度。

经过测试，B小图的位移是：-50px -374px，尺寸大小就不用关心了，肯定和A小图一样，不一样就没法做了。

把B小图的定位background-position:-50px -374px;放在.btn:hover{}里即可。

样式如下：

.btn{
   background:url(bg.png);
   background-repeat:no-repeat;
   background-position:-25px -374px;
   height:16px;
   width:24px;
   text-align:center;
}
.btn a{
   line-height:16px;
   display:block;
   text-decoration:none;
}
.btn:hover{
   background-position:-50px -374px;
}

最终效果-鼠标移入之前：

最终效果-鼠标移入之后：

好啦，教程到这就结束了，小菜只是简单的演示了一个完整的制作流程，中间还有很多细节问题，比如浏览器兼容、CSS优化等等，这就需要读者自己探索了。

其实小菜一直在说的CSS抠图，真正的技术名叫CSS Sprite技术，国人习惯叫CSS精灵。

这种技术有好处也有坏处，好处是由于图片都放在一起，请求时只需请求一张图片，减少了与服务器的交互次数，还可以解决hover延迟加载的问题。坏处就是不好控制，扩展性不太好，以后有改动，可谓是牵一发而动全身，而且有时会因为屏幕分辨率不同出现背景断裂现象。

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

大きな画像から小さな画像をインターセプトする CSS スプライトの分析

関連記事