javascript - CSS - 在不调整大小的情况下剪切图像？

Question

例如，我有一个 500x500 的大图像和一个 100x100 的小正方形。

我不想调整大图的大小，所以我怎么能把它显示出来呢？

如果我变大，它会保持这样:

|--------|
|--------|
|--------|
|--------|

如果我剪掉它，只会出现大胆的事情:

|-------|
|-------|
|--------|
|--------|

Answer 1

如果需要，您可以使用 CSS 使用 background-image 属性，而不是使用 background-position 相应地设置图像

假设您有一个元素，100px x 100px 和尺寸为 300px x 300px 的图像

HTML

<div class="demo"></div>

CSS

div.demo {
   background-image: url('PATH_TO_IMAGE');
   background-position: 30px 100px; 
   background-repeat: no-repeat; /* Just to be sure it won't repeat, 
                                    even if you resize the element*/
   /* 30px - X Axis, 100px - Y Axis */
}