可以使用css将图像反射为阴影吗？答案

【问题标题】：Can images be reflected as a shadow using css?可以使用css将图像反射为阴影吗？
【发布时间】：2017-04-16 13:35:32
【问题描述】：

我已经看到很多采用这种风格的设计：

Image Reflection Shadows

显示反射的图像示例：

我只是想知道这是否甚至可以编码。我一直在寻找一种方法来做到这一点，但没有找到运气。我只是想对此有所了解。是为了好看还是有可能？

【问题讨论】：

我认为没有简单的方法可以做到这一点，使用 CSS 会更容易以这种方式导出图像....但这里有一个尝试：codepen.io/anon/pen/KNZvLN

标签： html css shadow

【解决方案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>

【讨论】：

是的，我知道有比我更好的答案。 +1
哇，非常感谢泰德！这正是我所希望的！
@SergioEstrada 没问题！请注意，只有最新版本的 IE 支持 CSS 过滤器caniuse.com/#feat=css-filters

【解决方案2】：

我没有遇到过类似描述的事情； 不过，您可能对以下内容感兴趣

Using CSS Filter property to Create Ambient-Light round Images

当颜色和背景之间有高对比度时效果更好

感谢 Codepen.io 上的原作者

body {background: #111}

.img {
  position: relative;
  display: inline-block;
  margin: 40px;
  height: 236px;
  width: 420px;
  border-radius: 5px;
  box-shadow: 0px 50px 100px -30px rgba(0,0,0,1);
}
.img:after {
  content: "";
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  filter: blur(50px) contrast(3);
  z-index: -1;
}

.first, .first:after {
  background: url("http://images.smh.com.au/2013/02/13/4028970/--art_wrestling_20130213154720739962-420x0.jpg");
}

.second, .second:after {
background: url("http://images.theage.com.au/2014/04/02/5317898/ZAH_hawk_LW-20140402235602816699-420x0.jpg");
}

<body>
<div class="container">
<div class="img first"></div>
<div class="img second"></div>
</div>
</body>

【讨论】：

【解决方案3】：

是的，当然。你必须使用 CSS3 -webkit-box-reflect: below;
各种各样的例子是here

【讨论】：

很高兴知道这个。我试过这个-webkit-box-reflect: below -5px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(89%, transparent), to(white));