Question

我正在尝试css中的clip属性。在无序列表中会有四个剪切的图像。第一行中的前两行，第二行中的后两行。但是图像不可见。为什么会发生？怎么修好？ jsfiddle

<html>
<head>
<style>
  body{
    overflow:hidden;
  }
  ul{
    width:200px;
    height:200px;
    display:table;
  }
  li{
    float:left;
    width:100px;
    height:100px;
    position:relative;
  }
  li img{
    position:absolute;
    clip:rect(100px,200px,200px,300px);
  }

</style>
</head>
<body>
  <ul>
    <li><img src="cat1.jpg" ></li>
    <li><img src="cat2.jpg"></li>
    <li><img src="cat3.jpg"></li>
    <li><img src="cat4.jpg" ></li>
  </ul>
</body>
</html>

Answer 1

您可以尝试以下代码：

Working Demo

li img{height:100px;width:100px;}
li img{clip:rect(100px,200px,200px,300px);}

Answer 2

删除图片的绝对位置，并将overflow: hidden;添加到prent li元素：这是更新后的fiddle

编辑：

您不应该使用clip属性来实现您的需求。一种方法是将overflow: hidden提供给父li元素，保留position: absolute的{{1}}并赋予其img和{{1}坐标，而不是剪辑坐标。因此，我们使用的效果是使用父top元素的尺寸来遮盖不应该可见的图像部分，并将图像移动到正确的坐标。

以下是更新的fiddle：

在css中试验clip属性

2 个答案: