白色到透明渐变与背景图像 [英] White to transparent gradient with background image

问题描述

我需要应用一个白色到透明的渐变，它覆盖页面顶部的大约1/4，并且可以显示页面其余部分的背景图片。

解决方案

我推荐使用这个方法来实现从渐变到纹理图像的无缝融合。

为白色到透明渐变生成的CSS代码如下：

  background：-moz线性梯度（top，rgba（255,255,255,1）0％，rgba（255,255,255,0）100％）; / * FF3.6-15 * / 
 background：-webkit-linear-gradient（top，rgba（255,255,255,1）0％，rgba（255,255,255,0）100％）; / * Chrome10-25，Safari5.1-6 * / 
 background：linear-gradient（to bottom，rgba（255,255,255,1）0％，rgba（255,255,255,0）100％）; / * W3C，IE10 +，FF16 +，Chrome26 +，Opera12 +，Safari7 + * / 
 filter：progid：DXImageTransform.Microsoft.gradient（startColorstr ='＃ffffff'，endColorstr ='＃00ffffff'，GradientType = 0）; / * IE6-9 * / 
  

I need to apply a white to transparent gradient which covers about a 1/4 of the top of the page and a background image visible for the rest of the page.

Im looking to achieve a seamless blend from a gradient to a textured image and to do this in CSS3.

解决方案

I recommend Ultimate CSS Gradient Generator - ColorZilla.com

It's a well designed tool and there's a white to transparent preset.

The CSS code that it generates for a white to transparent gradient is this:

background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0 ); /* IE6-9 */

这篇关于白色到透明渐变与背景图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！