Question

我正在尝试clip一张图片。此图像具有box-shadow属性。

我想要的是将clip应用于图片，但我想保留box-shadow，而不是原始图片，而是clip图片。

我该怎么做？

关注我的HTML / CSS3代码：

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, 500px, 500px, 0px);
  transition: all 1s;
}

#image {
  position: relative;
}
#image:hover img {
  clip: rect(0px, 50px, 50px, 0px);
}

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

注意：我想避免使用javascript或jquery来管理这个问题。但是，当然，如果没有其他解决方案并且javascript / jquery代码是必要的，我将使用它。

[编辑]

我希望原始图像和最终图像具有框阴影，并且框阴影可以是动画以及剪辑。

Answer 1

这是我的解决方案，不需要剪辑。

#image {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 500px;
  height: 100px; background:url("http://www.menucool.com/slider/jsImgSlider/images/image-slider-2.jpg");
  transition: all 1s;
  -webkit-box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 1);
}

#image:hover {
  width: 50px;
  height: 50px;
}

<div id="image">

</div>

带有框阴影的Css剪辑图像不起作用

1 个答案: