如何在css中进行图像剪辑答案

【问题标题】：How to make image clipping in css如何在css中进行图像剪辑
【发布时间】：2014-08-25 13:32:55
【问题描述】：

我试图在 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>

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

【问题讨论】：

请提供jsfiddle方便测试
使用溢出：隐藏；在 .img_nav_individual 类中

标签： html css image-clipping

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

如果要使用剪辑，则图像需要具有position: absolute 或position: fixed 属性才能工作。

【讨论】：

【解决方案3】：

我相信在查看了我们需要这样做的两个图像之后

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

如果你注意到我在 img 标签中添加了align="right"

【讨论】：

【解决方案4】：

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

【讨论】：