css3制作斜纹背景二:webkit内核

在前面的文章(《css3制作斜纹背景(一)》)里面讲到了以mozilla为内核的浏览器斜纹背景的写法,本文主要讲以webkit为内核的浏览器下斜纹背景的写法。基础知识可参考《css3实现背景颜色线性渐变》和《css3控制背景图大小background-size》。

 1、制作一个简单的竖条纹背景

css如下,效果图参见1:

body {
    background-color: #eee;
    background-image:-webkit-gradient(linear,0 0,100% 0,from(#fff),to(#000));
    background-size: 80px 80px;
}

 2、改变条纹的方向,效果参见图2

body {
    background-image:-webkit-gradient(linear,0 100%,100% 0,from(#fff),to(#000));
}

 3、添加丰富的颜色渐变,效果参见图3

body {
    background-image:-webkit-gradient(linear,0 0,100% 0,from(#fff),to(#000),color-stop(25%,#fc0),color-stop(50%,#0fc),color-stop(75%,#f0c))
}

 4、调整颜色,并添加透明色。效果参见图4

background-image:-webkit-gradient(linear,0 0,100% 0,color-stop(25%,#0fc),color-stop(25%,transparent),color-stop(50%,transparent),color-stop(50%,#fc0),color-stop(75%,#f0c),color-stop(75%,transparent));

 5、按第2步来调整方向

background-image:-webkit-gradient(linear,0 100%,100% 0,color-stop(25%,#0fc),color-stop(25%,transparent),color-stop(50%,transparent),color-stop(50%,#fc0),color-stop(75%,#f0c),color-stop(75%,transparent));

看过上一篇文章的人应该非常熟悉了,效果图参见5

 6、调整颜色,调整background-size大小,效果图参见6

body {
    background-image:-webkit-gradient(linear,0 100%,100% 0,color-stop(25%,#000),color-stop(25%,transparent),color-stop(50%,transparent),color-stop(50%,#000),color-stop(75%,#000),color-stop(75%,transparent));
    background-size: 16px 16px;
}

 

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

虽然上面的斜纹背景已经出来了,但还没有达到我们想要的最终效果。我们再把里面的颜色值修改一下,换成白色。现在的颜色值为#fff,我们再把它换成rgba形式为rgba(255,255,255,1),前面的三个数字为rgb,第四个数字为alpha,现在我们把这个alpha改成半透明的,最终代码如下:

body {
    background-color: #eee;
    background-image: -moz-linear-gradient(45deg,#fff 25%, transparent 25%, transparent 50%,#fff 50%,#fff 75%, transparent 75%, transparent);
    background-image:-webkit-gradient(linear,0 100%,100% 0,color-stop(25%,rgba(255,255,255,0.2)),color-stop(25%,transparent),color-stop(50%,transparent),color-stop(50%,rgba(255,255,255,0.2)),color-stop(75%,rgba(255,255,255,0.2)),color-stop(75%,transparent));
    background-size: 16px 16px;
}

上面的代码加上了上一节讲的mozilla内核浏览器下的写法,在火狐、谷歌浏览器中测试显示正常。我现在还不知道在IE下面的效果怎么来做,等学习到了,再和大家分享。最终效果如下:

 

马上分享给你的朋友吧~

css3制作斜纹背景二:webkit内核》上有 1 条评论

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注

*

您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>