如何在CSS中进行图像裁剪

Question

我试图在css上做一个剪贴蒙版，但我觉得我走错了轨道。这是我试图转换为HTML的图像..

现在我尝试了它，它看起来像一团糟：

CSS：

.img_nav_individual {
    float: left;
    border: 3px solid #fff;
    margin-left: 8px;
    outline: 1px solid #c1cacf;
    max-width: 96px;
}

.img_nav_individual img { clip: rect(10px, 290px, 190px, 10px); }

HTML：

<div class="img_nav_individual"> <img src="img/parents1.png" />
  <div class="image_nav_text"> <span>parents</span> </div>
</div>

非常感谢您的建议。谢谢！

Answer 1

您应该在img_nav_individual上使用overflow:hidden;属性。这将有助于您的示例：http://jsfiddle.net/6wPvW/

Answer 2

在外部元素上使用overflow:hidden;或将图像设置为背景图像，以实现您的目标。

如果您想使用剪辑，那么图片需要有position: absolute或position: fixed属性才能正常工作。

Answer 3

在查看我们需要执行此操作的图像后，我相信

 <div class="img_nav_individual"> 
  <img src="img/parents1.png" align="right" />
  <div class="image_nav_text"> 
  <span>parents</span> </div>
 </div>

如果您发现我已将align="right"添加到img标记

Answer 4

我知道我应该专注于代码/技术。但我有一个意见，为什么你不尝试在html页面上使用之前裁剪这些图像？我认为这种方式很简单快速！