Mozilla内核浏览器制作后台背景渐变

1、制作简单的交叉条纹梯度背景。

Mozilla内核的浏览器CSS样式：

CSS代码将内容复制到剪贴板。


{体
背景颜色：# AAA；
Background-image:-moz-linear-gradient (#000 25%, #fc0 80%);
背景尺寸：50px 50px；
}




代表Firefox，结果如下：


改变背景值大小可以控制背景条纹的高度。在这个例子中，价值-moz线性梯度被分为两组，开始值和结束值，而设置的起始位置和结束位置的最终值的初始值，位置是梯度的形成部分。开始前岗位为起始颜色值的部分，和结束后的部分填充的颜色值的结尾。

2。改变条纹的方向

CSS代码将内容复制到剪贴板。


{体
背景图像：-moz线性梯度（0度，# 000 25%，# FC0 80%）；
}




在上述模式中添加了一组参数。参数0deg-360deg。当这是0度，增加了垂直条纹。当程度的增加，它是逆时针转。下图是0度和45deg效果图，分别：




三.我们尝试添加更多的颜色。

CSS代码将内容复制到剪贴板。


{体
背景图像：-moz线性梯度（45度，# 000 25%，透明25%，# FC0 80%）；
}




可以看到，在原始代码中，我添加了一个透明的颜色（透明25%）。这个梯度的位置与前梯度的位置相一致。发生什么事了


从上面我们可以清楚地看到，第一个颜色停止。那么，我们将要尝试什么样的效果来添加更多的颜色我要把角0deg这里，所以看起来更清晰。

CSS代码将内容复制到剪贴板。


{体
背景图像：-moz线性梯度（0度，# 000 25%、透明25%、透明50%、# FC0 50%，# F00 75%，透明75%）；
}




猜猜效果图是什么样子的


这里要注意的一个问题，这是写在背景大小50px，50px；然后，它可以分为重复的块，每个块50px×50px，和位置和每个块的结束位置的注意。

4。背景的雏形

现在，你会改变原来的0度至45度，它看上去像什么


你应该能看到这是一个斜纹的背景：

CSS代码将内容复制到剪贴板。


{体
背景图像：-moz线性梯度（45度，# 000 25%，25% 50% #透明，透明，000 50%，000 75% #，透明75%）；
背景尺寸：16px 16px；
}




你看什么，有效果，得到你的满足，修改颜色的价值，达到你的目的。让我们自己想想吧。背景尺寸的值需要注意什么


5，最终效果

虽然上面的斜纹背景已经出来了，它还没有达到我们想要的最终效果。让我们改变里面的颜色值和变白。现在的颜色值是# FFF。我们改变它的RGBA形式RGBA（255255255,1）。前面的三个数字是RGB，第四个数字是alpha。现在我们把alpha变成半透明，代码如下所示：

CSS代码将内容复制到剪贴板。


{体
背景颜色：# Eee；
背景图像：-moz线性梯度（45度，RGBA（255, 255, 255，0.2）25%、透明25%、透明50%、RGBA（255, 255, 255，0.2）透明，RGBA（透明、RGBA，透明），透明，透明）。
背景尺寸：16px 16px；
}




WebKit内核
1，制作简单的垂直条纹背景。

CSS如下，这里的效果图可以与上面的Firefox版本进行比较。

CSS代码将内容复制到剪贴板。



{体
背景颜色：# Eee；
背景图像：-webkit-gradient（线性，0 0100 0，从（# FFF），以（# 000））；
背景尺寸：80px 80px；
}




2。改变条纹的方向，

CSS代码将内容复制到剪贴板。


{体
背景图像：-webkit-gradient（线性，0, 100 %，100% 0，从（# FFF），以（# 000））；
}




3，添加丰富的颜色渐变

CSS代码将内容复制到剪贴板。


{体
背景图像：-webkit-gradient（线性，0 0100 0，从（# FFF），以（# 000），色站（25%，# 0），色站（50%，# 0fc），颜色停止（75%，））。
}




4、调整颜色，添加透明色。


复制代码代码如下：背景图像：-webkit-gradient（线性，0 0100 % 0，色站（25%，# 0fc），颜色停止（25%，透明），颜色停止（50%，透明），色站（50%，# 0）、透明（75% V），和（（75%））。
5。第二步调整方向


复制代码代码如下：背景图像：-webkit-gradient（线性，0 100%，100% 0，色站（25%，# 0fc），颜色停止（25%，透明），颜色停止（50%，透明），色站（50%，# 0），颜色（75%，颜色停止停止），和（（75%））。
6。调整颜色并调整背景尺寸。

CSS代码将内容复制到剪贴板。


{体
背景图像：-webkit-gradient（线性的，0, 100，100%，0，颜色停止（25%，# 000），颜色停止（25%，透明色），停止（50%，透明），色站（50%，000，#）颜色停止（75%，色站），和（（75%））。
背景尺寸：16px 16px；
}






7、调整颜色值的透明度，最终效果如下：

虽然上面的斜纹背景已经出来了，它还没有达到我们想要的最终效果。让我们改变里面的颜色值改为白色，颜色值是# FFF现在。让我们改变它的RGBA形式RGBA（255255255,1）。前面的三个数字是RGB，第四个数字是alpha。现在我们把阿尔法变成半透明。最后的代码如下所示。

CSS代码将内容复制到剪贴板。


{体
背景颜色：# Eee；
背景图像：-moz线性梯度（45度，# FFF 25%、透明25%、透明50%、# FFF 50%，# FFF 75%、透明75%、透明）；
背景图像：-webkit-gradient（线性0, 100 %，100%，0，（25%，RGBA颜色停止（255255255,0.2）），颜色停止（25%，透明色），停止（50%，透明），颜色停止（50%，RGBA颜色（255255255,0.2），停止（75%），RGBA（255255255,0.2）），色站（75%，透明））；
背景尺寸：16px 16px；
}




上面的代码添加到上面描述的Mozilla内核浏览器中，这是在Firefox和谷歌浏览器中测试的。