css 剪辑不工作

Question

我在 css 位置上尝试了几种不同的排列 parent 和 child。我有一个包含 3 个单元格的 spritesheet。我有一些使用背景图像技巧的旧代码，我正在尝试更新它以在 css 中使用 clip :rect( )。理想情况下，我会有一个控制显示大小的跨度。和图像上 css 属性的组合将获得正确的单元格。我在这里错过了什么？

<html>
    <head>
        <style>
        .marketItemImage{
            display: inline-block;
            width: 100px;
            height: 104px;
            border: 3px solid black;
            overflow: hidden;
        }
        img {
            clip: rect("0px 300px 104px 200px");
        }
        </style>
    </head>
    <body>
        <span class="marketItemImage">
            <img src="http://villagegamedev2.appspot.com/client/assets/textures/sprites/plantsSmall.png" />
        </span>
    </body>
</html>

Answer 1

好吧，您可能想将剪辑值更改为 rect(top, right, bottom, left)，然后将图像的位置更改为 absolute，这样您就可以自由调整其位置（left/top).然后，您需要根据 span 块的大小和精灵的大小相应地计算 top/left。

这是一个例子。

关于 clip 属性的一些基本信息可以在这里找到 http://www.w3schools.com/cssref/pr_pos_clip.asp

.marketItemImage {
  display: inline-block;
  width: 100px;
  height: 104px;
  border: 3px solid black;
  overflow: hidden;
}
img {
  position: absolute;
  left: -189px;
  clip: rect(0px, 300px, 104px, 200px);
}

 <span class="marketItemImage">
            <img src="http://villagegamedev2.appspot.com/client/assets/textures/sprites/plantsSmall.png" />
        </span>

css 剪辑不工作

css clip is not working

html

css

clip