css - 为 css -webkit-box-reflect 添加颜色而不是图像

Question

我想在底部而不是图像本身淡化为纯色反射，这可能吗？

http://codepen.io/vincentccw/pen/iGrmq

img{            
  -webkit-box-reflect: below -2px
  -webkit-gradient(linear,
                center top,
                center bottom,
                from(transparent),
                to(white)); 
}

Answer 1

你在找这个吗？现场演示（点击）。

示例标记：

<div class="img-container">
  <img src="http://static.jquery.com/files/rocker/images/logo_jquery_215x53.gif" />
</div>

JavaScript：

body{
  background: black;
}

img {            
  -webkit-box-reflect: below 0px;
}
.img-container {
  display: inline-block;
  position: relative;
}
.img-container:after {
  content: '';
  display: block;
  top: 100%;
  bottom: -100%;
  left: 0;
  right: 0;
  position: absolute;
  background: linear-gradient(to bottom,
    transparent 0%,
    #FFF 82%
  )
}