富贵资源网

详解CSS制作Web页面条纹背景样式的技巧
站长资源 2024/11/2 佚名
30 1538
富贵资源网 Design By www.hznty.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.hznty.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
富贵资源网 Design By www.hznty.com
www.hznty.com 富贵资源网
20,135影音资源
44,641技术资源
2,817软件资源
435,032站长资源
一句话新闻
苹果官宣WWDC 2024！预计会有大批AI功能 - 2024/11/2

3月27日消息，苹果宣布2024年全球开发者大会（WWDC）将于6月10日至6月14日举行，巧合的是，这次大会与端午假期重合。

苹果官方表示：

在线参加 Apple 每年规模最大的开发者盛会。亲眼见证 Apple 最新平台、技术和工具的发布。了解如何创建和改进你的 App 和游戏。与 Apple 设计师和工程师互动交流，与全球开发者社区建立联系。以上活动均免费在线举行。

探索各种新的工具、框架和功能，助力你打造出理想的 App 和游戏。通过视频讲座学习新技能，与 Apple 专家进行一对一会面，以推进你的项目，完善你的构思。

Swift Student Challenge 旨在支持和鼓舞下一代开发者、创作者和企业家。太平洋时间 3 月 28 日，我们将公布今年的获奖者名单。获奖者将有资格参加在 Apple Park 举办的特别活动。我们还会选出 50 名杰出获胜者，他们将受邀前往库比提诺，获得为期三天的非凡体验，包括参加 Apple Park 的特别活动。

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB，每个模块容量为2GB。其速度预设为32 Gbps（PAM3），但也可以降至28 Gbps，以提高产量和初始阶段的整体性能和成本效益。

据三星表示，GDDR7内存的能效将提高20%，同时工作电压仅为1.1V，低于标准的1.2V。通过采用更新的封装材料和优化的电路设计，使得在高速运行时的发热量降低，GDDR7的热阻比GDDR6降低了70%。

友情链接

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