2

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

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

4

4 回答 4

2

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

于 2014-07-04T09:07:28.973 回答
1

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

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

于 2014-07-04T09:14:12.000 回答
0

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

 <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 标签

于 2014-07-04T09:15:46.463 回答
0

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

于 2014-07-04T09:31:20.223 回答