javascript - 是否可以使用 css 裁剪图像并将其显示为 css 背景？

Question

我想知道如何将图像的一部分显示为 css 背景。

例如:如果图像是 500x500 像素，我如何显示图像只显示图像的左上角(50x50 从 0,0 开始)？

Answer 1

您可以使用 CSS clip 属性。如果你只想在 50px x 50px 的正方形中显示左上角，你可以这样做

position: absolute;
clip: rect(0px, 50px, 50px, 0px);

在你的背景图片上。如前所述，在评论中，这已被弃用，但还有其他选择。

您可以使用 CSS clip-path 属性。

-webkit-clip-path: polygon(0 0, 10% 0, 10% 10%, 0 10%);
-moz-clip-path: polygon(0 0, 10% 0, 10% 10%, 0 10%);
-o-clip-path: polygon(0 0, 10% 0, 10% 10%, 0 10%);
clip-path: polygon(0 0, 10% 0, 10% 10%, 0 10%);

这实际上总是得到图像的 10%，所以如果你每次只想要 50px，使用

-webkit-clip-path: inset(0 450px 450px 0);
-moz-clip-path: inset(0 450px 450px 0);
-o-clip-path: inset(0 450px 450px 0);
clip-path: inset(0 450px 450px 0);

你也可以像这样用 crop 类将图像包装在 div 中

<div class="crop>
    <img src=""/>
</div>

然后像这样裁剪它。

.crop {
    width: 50px;
    height: 50px;   
    overflow: hidden;
}

如果你想调整位置，你可以调整 .crop img 的边距。