css 这个效果请问怎么做呢,在h5页面.

Question

上面这个横线,是我用Photoshop做的,就是一个div,填充了白色,中心透明度0.5,然后两边透明度慢慢变成0.

渐变我会,透明度我也会,但是这样加起来我就不会了,请问怎么弄呢?

Answer 1

css3 有个颜色可以用rgba表示。比如背景色是白色的就是 background:rgba(255,255,255,1);
最后一个1表示颜色透明度，1表示完全不透明，0表示完全透明。下面图设置背景颜色30%（.3）的透明度。

所以我们可以根据这个来设置渐变背景色开始位置和结束位置透明度为0就可以了,然后越靠中间就逐渐设置透明度高一些就可以了，如下图：

附上代码

background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.4) 10%, rgba(255, 255, 255, 0.6) 20%, rgba(255, 255, 255, 0.6) 80%, rgba(255, 255, 255, 0.4) 90%, rgba(255, 255, 255, 0) 100%);