0

CSS を使用して div 内の画像の一部(つまり、画像スプライト)のみを表示する方法はわかっていますが、画像は背景画像でなければなりません。

CSS を使用して画像をスケーリングする方法はわかっていますが、画像は IMG でなければなりません。

拡大縮小して画像化し、その一部のみを表示する方法を知っている人はいますか?

たとえば、私はしたい：

  1. (15,15) から (100,100) までのピクセルを表示し、
  2. 200% 拡大します。

最初にできることは、背景画像を作成することです。2 つ目は、前景イメージにすることです。しかし、これまでのところ、両方を行う方法を確認していません。CSS/HTMLだけでも可能ですか？

4

1 に答える 1

7

通常と同じように画像を拡大縮小できます。次に、コンテナー div を使用して画像をトリミングします。四角形を切り抜く場所を設定するには、position: relative(含まれている div ではなく) 画像で使用します。以下は、stackoverflow のロゴを使用した例です。

<style type="text/css">
div {
    /* Set size of crop area. Setting its location happens bellow. */
    width: 150;
    height: 100;
    overflow: hidden;  /* Crop it like it's hot! */

    /* not part of the implementation; only to display what's going on */
    border: 1px solid black;
    background-color: #ddd;
}

img {
    /* Set the crop location by shifting the image
     * up by 70px and to the right by 30px.
     */
    position: relative;
    top: -70px;
    left: 30px;

    /* Scale the image as you normally would. */
    width: 300px;
    height: 150px;
}
</style>

<div>
  <img src="http://sstatic.net/so/img/logo.png">
</div>
于 2010-05-02T04:45:37.253 に答える