显示图像中的特定块[重复]答案

【问题标题】：Display a specific block from an image [duplicate]显示图像中的特定块[重复]
【发布时间】：2020-01-30 21:02:03
【问题描述】：

我有一个图像（example.png）被分成 n 次 m 个块，并考虑这个类：

.myFullImg{
   background: url(example.png);
}

我想创建一个 div，我在他的背景中只显示一个特定的块：

<div class="myFullImg" style="..."></div>

上面的style不知道放什么？

示例：图像image.png 有：height:150px 和width:100px。

然后我在这张图片中有 6x4=24 块，height:25px 和 width:25px

我想在一个 div 中显示来自图像 image.png 的块

感谢您的帮助

【问题讨论】：

你想在div上设置一个宽高，然后调整背景图片的background-position属性来匹配你想要的图片。
感谢您的贡献

标签： css

【解决方案1】：

将 div 的 width 和 height 设置为 25px 并利用 background-position 属性以 25 像素为单位的负值。因此，为了显示第 6 个块（从左上角开始），您可以像这样设置值：

.myFullImg{
   background: url("https://placekitten.com/100/150");
   background-position: -25px -25px;
   width: 25px;
   height: 25px;
   overflow: hidden;
}

&lt;div class="myFullImg"&gt;&lt;/div&gt;

【讨论】：