Question

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

Image Reflection Shadows

显示反射的图像示例：

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

Answer 1

是的！您可以使用CSS和filter: blur();

执行此操作

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

＆＃13;

* {
  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;
}

＆＃13;

<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>

＆＃13;

Answer 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>

Answer 3

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

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

3 个答案: