频道栏目
首页 > 程序开发 > web前端 > HTML/CSS > 正文
神奇的CSS技巧探秘——CSS绘制条纹背景
2016-05-26 09:44:01         来源:fareise的博客  
收藏   我要投稿

一、横向条纹

如下代码:

background: linear-gradient(#fb3 20%, #58a 80%)

上面代码表示整个图片的上部分20%和下部分20%是对应的纯色,只有中间的部分是渐变色。如果让中间的部分逐渐缩小,当中间部分变为0即上下两种颜色的七点和终点相同是,就没有了渐变而变成了两种颜色的色条:

background: linear-gradient(#fb3 50%, #58a 50%);

接下来可以通过设置背景的大小,让背景高度变小并且背景默认为repeat,从而出现条纹状

background: linear-gradient(#fb3 50%, #58a 50%);

background-size: 100% 30px;

我们可以不设定第二个颜色的起始位置,设置为0,则浏览器默认为接着上一个颜色开始:

background: linear-gradient(#fb3 30%, #58a 0);

background-size:100% 30px;

这样就形成了一个黄色占30%蓝色占70%的条纹状背景

也可以设置多种颜色,下面设置了三种颜色的条纹:

background: linear-gradient(#fb3 33.3%, #58a 0, #58a 66.6%,yellowgreen 0);

background-size: 100% 45px;

二、竖向条纹

只需要在linear-gradient方法中加一个前缀即可。注意还需颠倒background-size长宽的设定

background: linear-gradient(to right, #fb3 50%, #58a 0);
background-size:30px 100%;

三、斜向条纹

可以通过修改background-size的值以及为linear-gradient添加角度来实现斜向的条纹:

background: linear-gradient(45deg, #fb3 50%, #58a 0); //让背景的渐变带有倾斜

background-size:30px 30px;//每一块小组成部分固定宽度和高度

但这样做的结果是只会形成一小块一小块的斜线,而不是整体p的斜线,我们需要以四个小p为一组绘制斜线,添加linear-gradient中的颜色分解:

background: linear-gradient(45deg, #fb3 25%, #58a 0, #58a50%, #fb3 0, #fb3 75%, #58a 0);
background-size:30px 30px;

四、使用repeat-linear-gradient

对于斜线的背景绘制,使用repeat-linear-gradient方法更有效。使用该方法的时候,设置的颜色变化会自动进行重复直到铺满整个p。实例代码如下:

background: repeating-linear-gradient(45deg, #fb3, #58a 30px);

通过这种方式可以任意更改角度,而不会出现上中方法中的调节困难

background: repeating-linear-gradient(60deg, #fb3, #fb315px, #58a 0, #58a 30px);

(这种方法其实相当于将size的控制和gradient的控制合到了一起)

五、关于颜色的设定

有时我们希望条纹背景的颜色之间是相近的颜色,但是如果手动设定这个颜色的#很不方便,也很难发现要选择什么样的颜色。可以使用如下方法:

background: #58a;
background-image: repeating-linear-gradient(30deg,
hsla(0,0%,100%,.1),
hsla(0,0%,100%,.1)15px,
transparent 0,transparent 30px);

这种方法的原理是:指定背景中最深的颜色,条文中其他相近色用透明度进行调整

点击复制链接 与好友分享!回本站首页
相关TAG标签 条纹 背景 技巧
上一篇:HTML---网页编程基础知识
下一篇:CSS---网络编程
相关文章
图文推荐
点击排行

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站