如何在css中切片图像

Question

我想使用CSS在我的html文档中切片。

以下是我想要切片的方法。我用红色掩盖了它：

<div class="img_section" >
  <img src="http://i62.tinypic.com/1zbcqhg.jpg"  alt="sliced-image" >
</div>

我不想使用遮罩层来隐藏图像，因为文档的背景不是纯色。我使用border-radius属性来做，但我做不到。如果CSS无法实现，那么js也不可能吗？

Answer 1

您可以使用svg clipPath剪辑图片，foreignObject导入svg内的html，因为您只能申请{ {1}} svg到clipPath元素。

＆＃13;

＆＃13;

svg

＆＃13;

＆＃13;

＆＃13;

Answer 2

你可以用CSS layer max做到这一点，我写了一个例子来创建你想要的东西，用黑色面具覆盖。

HTML代码：

<div class="img_section" >
  <img src="http://i62.tinypic.com/1zbcqhg.jpg"  alt="sliced-image" >
  <div class="image-arrow"></div>
</div>

CSS：

.img_section{
    width:445;
    height:257px;
    position:absolute;
}
.image-arrow{
    width: 0;
    height: 0;
    border-bottom: 257px solid black;
    border-left: 130px solid transparent;
    position:absolute;
    right: 0;
    bottom: 0;
}

Answer 3

在CSS中没有这样的方法来切割图像，这只能在LESS和SASS中完成，但你可以使用多个图像作为精灵（单个图像多个图标）

Check this out

Answer 4

我不确定，但我认为你可能在寻找clip-path：https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path

然而，浏览器支持相当不完整（截至2015年7月）。 http://caniuse.com/#search=clip-path