杰晶网络

详解CSS制作Web页面条纹背景样式的技巧
网页制作 2024/11/24 佚名
3 2

一、横向条纹
如下代码：

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.     height: 250px;   
  3.     width: 375px;   
  4.     float: left;   
  5.        
  6.     margin: 10px;   
  7.        
  8.     -webkit-background-size: 50px 50px;   
  9.     -moz-background-size: 50px 50px;   
  10.     background-size: 50px 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,条纹,背景
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
评论“详解CSS制作Web页面条纹背景样式的技巧”
暂无“详解CSS制作Web页面条纹背景样式的技巧”评论...
www.imxmx.com 杰晶网络
8,675无损音乐
1,324高清电影
213破解软件
120,141站长资源

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。

更新动态

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网