html - 多个 -webkit-box-reflect 左右一张图片

Question

所以，

我正在研究扩展图像，使它们在给定特定高度的情况下填满宽度。

我决定我想做一些事情来左右反射图像。

但是，我只能让它应用于图像的一侧。

HTML:

<div class="image">
    <img src="http://i.imgur.com/LukIbK7.jpg" />
</div>

CSS:

.image {
    width:100%;
    margin:auto;
    text-align:center;
}
.image img {
    width:50%;
    -webkit-box-reflect: left 0px -webkit-gradient(linear, right top, left top, from(transparent), color-stop(20%, transparent), to(rgba(255, 255, 255, 0.5)));
}

jsfiddle

我也尝试按照类似帖子中的指示使用 :before(处理多个边框)here

如果还有其他解决方案，请告诉我(无需实际编辑图像)。

本质上，我希望结果 CSS 是:

.image img {
    width:50%;
    -webkit-box-reflect: left 0px -webkit-gradient(linear, right top, left top, from(transparent), color-stop(20%, transparent), to(rgba(255, 255, 255, 0.5)));
    -webkit-box-reflect: right 0px -webkit-gradient(linear, left top, right top, from(transparent), color-stop(20%, transparent), to(rgba(255, 255, 255, 0.5)));
}

实现:

但显然它只会覆盖它。

Answer 1

到目前为止，唯一与我想要创建的类似的东西是使用一些复制 img 的狡猾的 jquery。

$("img").clone().appendTo(".image")
.css("-webkit-box-reflect", "left 0px -webkit-gradient(linear, right top, left top, from(transparent), color-stop(20%, transparent), to(rgba(255, 255, 255, 0.5)))")
.css("margin-top", "-100%");

虽然很乱:http://jsfiddle.net/hum7uo2y/1/

编辑:

找到了一个方法，没想过反射一个div。

HTML 现在是:

<div class="image">
    <div class="reflect">
        <img src="http://i.imgur.com/LukIbK7.jpg" />
    </div>
</div>

CSS 现在是:

.image {
    width:100%;
    margin:auto;
    text-align:center;
}
.reflect {
    width:50%;
    margin:auto;
    -webkit-box-reflect: right -2px -webkit-gradient(linear, left top, right top, from(transparent), color-stop(20%, transparent), to(rgba(255, 255, 255, 0.5)))
}
.image img {
    width:100%;
    -webkit-box-reflect: left 0px -webkit-gradient(linear, right top, left top, from(transparent), color-stop(20%, transparent), to(rgba(255, 255, 255, 0.5)));
}

新 fiddle :http://jsfiddle.net/hum7uo2y/3/