Question

我有this jsfiddle代码，只有 css ，我才会在图片上应用剪辑但没有任何成功。

我尝试放置一个外部div并将剪辑应用到包含图像的div中，但是再次没有成功。

有谁知道为什么会这样？

遵循css代码：

<div id="image">
  <img src="http://www.menucool.com/slider/jsImgSlider/images/image-slider-2.jpg">
</div>

按照html代码：

$input

Answer 1

注意： CSS clip property is deprecated，不应使用。

CSS clip属性仅适用于绝对定位的元素，因此您需要绝对定位#image并将clip应用于它（或）img绝对并直接将剪辑应用于它。

需要注意的另一点是，提供给rect函数的参数指定了框左上角边缘的偏移量。因此，值（<top>，<right>，<bottom>，<left>）都应该以这样的方式指定，即它们形成一个合适的矩形。

＆＃13;

img {
  position: absolute;
  width: 500px;
  height 100px;
  top: 10px;
  left: 10px;
  -webkit-box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 1);
  -moz-box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 1);
  box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 1);
  clip: rect(0px, 20px, 20px, 0px);
}

#image {
  position: relative;
}

＆＃13;

<div id="image">
  <img src="http://www.menucool.com/slider/jsImgSlider/images/image-slider-2.jpg">
</div>

＆＃13;

clip属性可转换/动画为rect，因此可以实现类似下面的代码段。

＆＃13;

img {
  position: absolute;
  width: 500px;
  height 100px;
  top: 10px;
  left: 10px;
  -webkit-box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 1);
  -moz-box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 1);
  box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 1);
  clip: rect(0px, 20px, 20px, 0px);
  transition: all 1s;
}

#image {
  position: relative;
}
#image:hover img {
  clip: rect(0px, 50px, 50px, 0px);
}

＆＃13;

<div id="image">
  <img src="http://www.menucool.com/slider/jsImgSlider/images/image-slider-2.jpg">
</div>

＆＃13;

矩形剪辑中的CSS3动画/过渡

1 个答案: