javascript - 如何缩小较大的图像，同时在 CSS 中仅显示图像的一部分(或在必要时添加 JS)？

Question

我有一张 1024x1024 的图像，分为 4 个象限:

我想缩小此图像，使象限 2 为 256x256，并屏蔽或隐藏其他 3 个象限，使其仅在页面上可见。像这样:

如何做到这一点？是否可以使用纯 CSS 或一路需要 js？

Answer 1

假设您的目标浏览器(FF4+、IE9+、Safari 4.1+ Chrome 3+)可以使用 background-size CSS 属性，那么您可以单独在 CSS 中执行此操作:

.bg {
    background-image: url(http://i.stack.imgur.com/HQaif.jpg);
    background-repeat: no-repeat;    
    background-size: 203%;
    background-position: top left; 
    width: 256px;
    height: 256px;  
}

如果您删除每个部分之间的红色键线，则可以将大小属性设置为 512px，如果您将来需要再次调整大小，这将使计算更容易。

Example fiddle

有关 background-size 的更多信息