Question

我在父母和孩子的css位置尝试了几种不同的排列。我有一个有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 ）。然后，您需要根据top/left块的大小和精灵的大小相应地计算span。

这是一个例子。

有关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剪辑不起作用

1 个答案: