快活林资源网

详解CSS制作Web页面条纹背景样式的技巧
网页制作 2024/12/24 佚名
3 1
快活林资源网 Design By www.csstdc.com

一、横向条纹
如下代码：

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>  
快活林资源网 Design By www.csstdc.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
快活林资源网 Design By www.csstdc.com
www.csstdc.com 快活林资源网
120,135影音资源
344,641技术资源
22,817软件资源
435,032站长资源
一句话新闻
一口气升级7个大模型SaaS应用，百度智能云：突出一个“开箱即用” - 2024/12/24

这一波大模型产业落地浪潮里，不少企业其实处在 “干瞪眼“的状态。

一种情况是，很多大模型产品看得见却摸不着，在台上一个个遥遥领先——今天Sora技精四座，明天英伟达的机器人又赢得满堂彩，可是到了台下一问：啥时候能用上啊？答曰：遥遥无期。

另一种情况是，企业想用上大模型，却又难免瞻前顾后——既要考虑场景融合，又得兼顾安全性，还要考虑打通现有系统，再加上各种部署成本和繁琐的采购流程……最后只能拂袖：罢了，再等等吧。

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。

而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
快活林资源网 Design By www.csstdc.com