沙漏形发光CSS答案

【问题标题】：Hourglass-shaped glowing CSS沙漏形发光CSS
【发布时间】：2012-04-22 19:20:56
【问题描述】：

我有一个设计师的图片，看起来像这样：

我想让它垂直重复 1px 高度（作为滚动条握把的背景）。有没有办法使用 CSS3 模拟图像中间的发光效果？

问候，

【问题讨论】：

【解决方案1】：

在其上创建另一个 div，背景如下：

background-image: linear-gradient(bottom, rgba(255,255,255, 0) 33%, rgba(255,255,255, 0.5) 67%, rgba(255,255,255,0) 100%);

当然，为了有任何用处，应该这样重写：

    background-image: linear-gradient(bottom, rgba(255,255,255, 0) 33%, rgba(255,255,255, 0.5) 67%, rgba(255,255,255,0) 100%);
    background-image: -o-linear-gradient(bottom, rgba(255,255,255, 0) 33%, rgba(255,255,255, 0.5) 67%, rgba(255,255,255,0) 100%);
    background-image: -moz-linear-gradient(bottom, rgba(255,255,255, 0) 33%, rgba(255,255,255, 0.5) 67%, rgba(255,255,255,0) 100%);
    background-image: -webkit-linear-gradient(bottom, rgba(255,255,255, 0) 33%, rgba(255,255,255, 0.5) 67%, rgba(255,255,255,0) 100%);
    background-image: -ms-linear-gradient(bottom, rgba(255,255,255, 0) 33%, rgba(255,255,255, 0.5) 67%, rgba(255,255,255,0) 100%);

【讨论】：

有没有希望在同一个div中合并img和渐变？
例如，我可以使用多个半透明图像作为多层背景。我将这种技术用于降雪动画。
我不确定，你只需要试验一下