可以使用css将图像反映为阴影吗？

Question

我一直在看这种风格的很多设计:

图像反射阴影

显示反射的图像样本:

我只是想知道这是否甚至可以编码.我一直在寻找一种方法来做到这一点,但没有找到运气.我只是希望得到一些许可.它只是为了看起来还是可能的？

Answer 1

是! 你可以用CSS和filter: blur();

演示http://jsbin.com/nidekeyajo/edit?html,css,js,output

* {
  box-sizing: border-box;
  margin: 0;
}

img {
  height: auto;
  max-width: 100%;
}

.wrap {
  margin: 0 auto;
  max-width: 400px;
  position: relative;
}

.image {
  display: block;
  position: relative;
  z-index: 2;
}

.shadow {
  bottom: -30px;
  filter: blur(20px);/* this is the magic part */
  height: 100%;
  left: 0;
  position: absolute;
  transform: scale(0.95);
  width: 100%;
  z-index: 1;
}

<div class="wrap">
  <img class="image" src="https://lorempixel.com/800/450/nature/3/" alt="rocky shore">
  <img class="shadow" src="https://lorempixel.com/800/450/nature/3/" alt="">
</div>