如何使用CSS制作Web页面条纹背景样式

发布时间:2021-07-02 11:33:40 作者:小新
来源:亿速云 阅读:175

这篇文章主要介绍了如何使用CSS制作Web页面条纹背景样式,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。

一、横向条纹
如下代码:

CSS Code复制内容到剪贴板

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

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

CSS Code复制内容到剪贴板

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

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

CSS Code复制内容到剪贴板

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

  2. background-size: 100% 30px;  

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

CSS Code复制内容到剪贴板

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

  2. background-size:100% 30px;  

这样就形成了一个黄色占30%蓝色占70%的条纹状背景
也可以设置多种颜色,下面设置了三种颜色的条纹:

CSS Code复制内容到剪贴板

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

  2. background-size: 100% 45px;  

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

CSS Code复制内容到剪贴板

  1. background: linear-gradient(to rightright#fb3 50%, #58a 0);     

  2. background-size:30px 100%;    


三、斜向条纹
可以通过修改background-size的值以及为linear-gradient添加角度来实现斜向的条纹:
background: linear-gradient(45deg, #fb3 50%, #58a 0);    //让背景的渐变带有倾斜
background-size:30px 30px;   //每一块小组成部分固定宽度和高度
但这样做的结果是只会形成一小块一小块的斜线,而不是整体div的斜线,我们需要以四个小div为一组绘制斜线,添加linear-gradient中的颜色分解:

CSS Code复制内容到剪贴板

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

  2. background-size:30px 30px;    

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

CSS Code复制内容到剪贴板

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

通过这种方式可以任意更改角度,而不会出现上中方法中的调节困难
background: repeating-linear-gradient(60deg, #fb3, #fb315px, #58a 0, #58a 30px);
(这种方法其实相当于将size的控制和gradient的控制合到了一起)
 
五、关于颜色的设定
有时我们希望条纹背景的颜色之间是相近的颜色,但是如果手动设定这个颜色的#很不方便,也很难发现要选择什么样的颜色。可以使用如下方法:

CSS Code复制内容到剪贴板

  1. background#58a;     

  2. background-image: repeating-linear-gradient(30deg,     

  3. hsla(0,0%,100%,.1),     

  4. hsla(0,0%,100%,.1)15px,     

  5. transparent 0,transparent 30px);    

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

六、综合实例
这里效果图一起放上来了,与下面的样式一一对应:
如何使用CSS制作Web页面条纹背景样式

CSS Code复制内容到剪贴板

  1. .stripes {   

  2.     height250px;   

  3.     width375px;   

  4.     floatleft;   

  5.        

  6.     margin10px;   

  7.        

  8.     -webkit-background-size50px 50px;   

  9.     -moz-background-size50px 50px;   

  10.     background-size50px 50px/* 控制条纹的大小 */  

  11.        

  12.     -moz-box-shadow: 1px 1px 8px gray;   

  13.     -webkit-box-shadow: 1px 1px 8px gray;   

  14.     box-shadow: 1px 1px 8px gray;   

  15. }  

CSS Code复制内容到剪贴板

  1. .horizontal {   

  2.     background-color#0ae;   

  3.     background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.5, transparent), to(transparent));   

  4.     background-image: -moz-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);   

  5.     background-image: -o-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);   

  6.     background-image: linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);   

  7. }  

CSS Code复制内容到剪贴板

  1. .vertical {   

  2.     background-color#f90;   

  3.     background-image: -webkit-gradient(linear, 0 0, 100% 0, color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.5, transparent), to(transparent));   

  4.     background-image: -moz-linear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);   

  5.     background-image: -o-linear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);   

  6.     background-image: linear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);   

  7. }  

CSS Code复制内容到剪贴板

  1. .picnic {   

  2.     background-color:white;   

  3.     background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, transparent), color-stop(.5, rgba(200, 0, 0, .5)), to(rgba(200, 0, 0, .5))),   

  4.                       -webkit-gradient(linear, 0 0, 100% 0, color-stop(.5, transparent), color-stop(.5, rgba(200, 0, 0, .5)), to(rgba(200, 0, 0, .5)));   

  5.     background-image: -moz-linear-gradient(transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5)),   

  6.                       -moz-linear-gradient(0deg, transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5));   

  7.     background-image: -o-linear-gradient(transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5)),   

  8.                       -o-linear-gradient(0deg, transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5));   

  9.     background-image: linear-gradient(transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5)),   

  10.                       linear-gradient(0deg, transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5));   

  11. }  

CSS Code复制内容到剪贴板

  1. .picnic {   

  2.     background-color:white;   

  3.     background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, transparent), color-stop(.5, rgba(200, 0, 0, .5)), to(rgba(200, 0, 0, .5))),   

  4.                       -webkit-gradient(linear, 0 0, 100% 0, color-stop(.5, transparent), color-stop(.5, rgba(200, 0, 0, .5)), to(rgba(200, 0, 0, .5)));   

  5.     background-image: -moz-linear-gradient(transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5)),   

  6.                       -moz-linear-gradient(0deg, transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5));   

  7.     background-image: -o-linear-gradient(transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5)),   

  8.                       -o-linear-gradient(0deg, transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5));   

  9.     background-image: linear-gradient(transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5)),   

  10.                       linear-gradient(0deg, transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5));   

  11. }  

CSS Code复制内容到剪贴板

  1. .angled-135 {   

  2.     background-color#c16;   

  3.     background-image: -webkit-gradient(linear, 0 0, 100% 100%,   

  4.                             color-stop(.25, rgba(255, 255, 255, .2)), color-stop(.25, transparent),   

  5.                             color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .2)),   

  6.                             color-stop(.75, rgba(255, 255, 255, .2)), color-stop(.75, transparent),   

  7.                             to(transparent));   

  8.     background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,   

  9.                         transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,   

  10.                         transparent 75%, transparent);   

  11.     background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,   

  12.                         transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,   

  13.                         transparent 75%, transparent);   

  14.     background-image: linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,   

  15.                         transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,   

  16.                         transparent 75%, transparent);   

  17. }  

CSS Code复制内容到剪贴板

  1. .checkered {   

  2.     background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, #555), color-stop(.25, transparent), to(transparent)),   

  3.                       -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, #555), color-stop(.25, transparent), to(transparent)),   

  4.                       -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.75, transparent), color-stop(.75, #555)),   

  5.                       -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.75, transparent), color-stop(.75, #555));   

  6.     background-image: -moz-linear-gradient(45deg, #555 25%, transparent 25%, transparent),   

  7.                       -moz-linear-gradient(-45deg, #555 25%, transparent 25%, transparent),   

  8.                       -moz-linear-gradient(45deg, transparent 75%, #555 75%),   

  9.                       -moz-linear-gradient(-45deg, transparent 75%, #555 75%);   

  10.     background-image: -o-linear-gradient(45deg, #555 25%, transparent 25%, transparent),   

  11.                       -o-linear-gradient(-45deg, #555 25%, transparent 25%, transparent),   

  12.                       -o-linear-gradient(45deg, transparent 75%, #555 75%),   

  13.                       -o-linear-gradient(-45deg, transparent 75%, #555 75%);   

  14.     background-image: linear-gradient(45deg, #555 25%, transparent 25%, transparent),   

  15.                       linear-gradient(-45deg, #555 25%, transparent 25%, transparent),   

  16.                       linear-gradient(45deg, transparent 75%, #555 75%),   

  17.                       linear-gradient(-45deg, transparent 75%, #555 75%);   

  18. }  

HTML代码:

XML/HTML Code复制内容到剪贴板

  1. <div class="horizontal stripes"></div>  

  2. <div class="vertical stripes"></div>  

  3. <div class="picnic stripes"></div>  

  4. <div class="angled stripes"></div>  

  5. <div class="angled-135 stripes"></div>  

  6. <div class="checkered stripes"></div>  

感谢你能够认真阅读完这篇文章,希望小编分享的“如何使用CSS制作Web页面条纹背景样式”这篇文章对大家有帮助,同时也希望大家多多支持亿速云,关注亿速云行业资讯频道,更多相关知识等着你来学习!

推荐阅读:
  1. Css背景样式的属性怎么设置
  2. CSS虚线样式的制作方法及虚线样式怎么用

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

css

上一篇:如何使用CSS制作三角形和按钮

下一篇:ftp端口号20和21的区别有哪些

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》