大きな画像から小さな画像を切り出すための CSS 完全チュートリアル (背景位置アプリケーション)_html/css_WEB-ITnose

背景位置の応用を解説したとても分かりやすい教科書だと思います。マークを付けます。

Web インターフェイスを勉強するのが好きな多くの子供たちは、Web ページ内の多くの画像素材が 1 つの画像に結合されるという素晴らしい現象に遭遇したことがあると思います。最初にWebサイトで小皿を模倣したとき、私はこの現象によく遭遇しました。当時は、他の人の写真素材をすべて使用することはできませんでした。 PSで単体のレイマジダに。 。 。

実際、これは非常に単純な技術であるため、問題の鍵が見つかっていないことは想像できません。 C 现 CSS カットを実現したい場合は、Background-posity 属性を使用するだけで済みます。理面 文字通り、この属性は背景の配置です。Google Web サイトのマテリアル マップを見て、このような動的な効果を実現するために B ピクチャを表示します。

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

地球上の一般的なアプローチは、ハイパーリンクを div に配置することです。ハイパーリンクは関数の実装を担当し、div は背景画像をロードします。 htmlの構造は次のとおりです。 假如我们什么都不考虑，直接整张图片设背景，

样式如下：

1 <div class="btn">2 <a href="http://www.kpdown.com">+1</a>3 </div>

效果如图：

div是块级元素、默认是占一行はい、今のところは心配する必要はありませんが、背景画像が繰り返されていることから、これは明らかに私たちが望んでいることではありません。background-repeat:no-repeat 属性を使用して、次のようにスタイルを改善します。

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

繰り返されません。

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

+1 の小さな画像が大きな画像に混在している場合、この属性は移動しない大きな画像に相当します。頂点の位置は以下のようになります。

このように、divに表示されるのは小さい画像ですが、表示されるのは小さい画像だけではなく、影が付いている部分です。写真の一部です。どうすればいいですか？

divの幅と高さを、小さい画像

の幅と高さと同じになるように設定します。 ！ A b 背景位置プロパティを見てみましょう。水平方向に移動するピクセルと垂直方向に移動するピクセルの 2 つのパラメーターがあります。大きな画像が動かずに div が動く場合、これら 2 つの方向に移動するピクセルは負の数で表されることに注意してください。したがって、大きな画像の左上隅と比較して、小さな画像の水平方向の移動ピクセルと垂直方向の移動ピクセルを見つければよいことになります。 Xiaocai は専門的なツールを必要とせず、大きな画像の左上隅から切り取りを開始し、小さな画像の上部で停止するだけでほぼ完了です。デバッグを繰り返して、基本的には完了です。

この例では、小さな画像 A の変位は -25px -374px、小さな画像 A のサイズは 24px 16px です。したがって、

css スタイルは次のとおりです:

1 .btn{2  background:url(bg.png);3  background-repeat:no-repeat;4 }

効果は次のとおりです。ラ！単純にする！ ！

先解释个问题，图片上有+1，而我又在超链上写了一个+1，这是因为很多时候文本内容不是写在图片上的，那样灵活性太差，文本就是文本，小菜为了给大家一个完整的演示，因此又写了一个+1，接下来就处理它！

先把+1居中，居中分为水平居中和垂直居中，水平居中超链接，需要在div上设置text-align:center;，这个属性是对子节点而言的；垂直居中div中的超链接，只需要把a标签的line-height属性设成和div的高度一样即可。样式如下：

 1 .btn{ 2  background:url(bg.png); 3  background-repeat:no-repeat; 4  background-position:-25px -374px; 5  height:16px; 6  width:24px; 7  text-align:center; 8 } 9 .btn a{10  line-height:16px;11 }

效果如下：

接下来呢，还有问题，我们可以发现，只有当鼠标移到+1文本上时，鼠标才会变成手型，才能响应事件。

这显然不是我们想要的，应该是鼠标移入图片时，确切的说是鼠标移入div时，就可以变成手型，也能响应事件。

这也简单，只需要在a标签(超链接)上加display:block;属性即可。

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

样式如下：

 1 .btn{ 2  background:url(bg.png); 3  background-repeat:no-repeat; 4  background-position:-25px -374px; 5  height:16px; 6  width:24px; 7  text-align:center; 8 } 9 .btn a{10  line-height:16px;11  display:block;12  text-decoration:none;13 }

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

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

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

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

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

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

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

样式如下：

 1 .btn{ 2  background:url(bg.png); 3  background-repeat:no-repeat; 4  background-position:-25px -374px; 5  height:16px; 6  width:24px; 7  text-align:center; 8 } 9 .btn a{10  line-height:16px;11  display:block;12  text-decoration:none;13 }14 .btn:hover{15  background-position:-50px -374px;16 }

 

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

   

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

 

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

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

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