html中背景条纹效果，纯css3实现条纹背景⽅法（⽔平，垂直，
倾斜）
以上这些并不是背景图，⽽是由CSS样式代码实现。在现代标准浏览器中，我们通过CSS3的两个属性，⼀个是linear-gradient，即线性渐变，另⼀个是background-size，⽤来确定渐变的尺⼨，就能显⽰出不同⽅向的条纹效果。今天我们就来详解CSS制作Web页⾯条纹背景样式的技巧，需要的朋友可以参考下。
1、横向条纹background: linear-gradient(#fb3 20%, #58a 80%)
上⾯代码表⽰整个图⽚的上部分20%和下部分20%是对应的纯⾊，只有中间的部分是渐变⾊。如果让中间的部分逐渐缩⼩，当中间部分变为0即上下两种颜⾊的七点和终点相同是，就没有了渐变⽽变成了两种颜⾊的⾊条。接下来可以通过设置背景的⼤⼩，让背景⾼度变⼩并且背景默认为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);
css最新background-size: 100% 45px;
2、竖向条纹
只需要在linear-gradient⽅法中加⼀个前缀即可。注意还需颠倒background-size长宽的设定background: linear-gradient(to rightright, #fb3 50%, #58a 0);
background-size:30px 100%;
3、斜向条纹
可以通过修改background-size的值以及为linear-gradient添加⾓度来实现斜向的条纹：
background: linear-gradient(45deg, #fb3 50%, #58a 0);(让背景的渐变带有倾斜)
background-size:30px 30px;(每⼀块⼩组成部分固定宽度和⾼度)
但这样做的结果是只会形成⼀⼩块⼀⼩块的斜线，⽽不是整体div的斜线，因此我们需要以四个⼩div为⼀组绘制斜线，添加linear-gradient 中的颜⾊分解：background: linear-gradient(45deg, #fb3 25%, #58a 0, #58a50%, #fb3 0, #fb3 75%, #58a 0);
4、repeat-linear-gradient⽅法
对于斜线的背景绘制，使⽤repeat-linear-gradient⽅法更有效。使⽤该⽅法的时候，设置的颜⾊变化会⾃动进⾏重复直到铺满整个div。实例代码如下：background: repeating-linear-gradient(45deg, #fb3, #58a 30px);
通过这种⽅式可以任意更改⾓度，⽽不会出现上中⽅法中的调节困难background: repeating-linear-gradient(60deg, #fb3, #fb315px, #58a 0, #58a 30px);(这种⽅法其实相当于将size的控制和gradient的控制合到了⼀起)
5、颜⾊设定
有时我们希望条纹背景的颜⾊之间是相近的颜⾊，但是如果⼿动设定这个颜⾊的#很不⽅便，也很难发现要选择什么样的颜⾊。可以使⽤如下⽅法：background: #58a;
background-image: repeating-linear-gradient(30deg,
hsla(0,0%,100%,.1),
hsla(0,0%,100%,.1)15px,
transparent 0,transparent 30px);
这种⽅法的原理是：指定背景中最深的颜⾊，条⽂中其他相近⾊⽤透明度进⾏调整。⽬前最新版本的FireFox/Opera/Safari/Chrome浏览器以及使⽤同样的内核的国产浏览器都已能够⽀持gradient渐变样式。实际上CSS渐变与photoshop中的渐变功能是⼀样的原理，⽹页样式渐变也可以有⽆限种可能，以下是⼀组完整⽰例：
.patterns {
width: 200px;
height: 200px;
float: left;
margin: 10px;
box-shadow: 0 1px 8px #666;
}
.pt1 {
background-size: 50px 50px;
background-color: #0ae;
background-image: -webkit-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
background-image: linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
}
.pt2 {
background-size: 50px 50px;
background-color: #0ae;
background-image: -webkit-linear-gradient(to right, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
background-image: linear-gradient(to right, rgba(255, 255, 255, .2) 50%, transparent 50%, transpare
nt);
}
.pt3 {
background-color: #0ae;
background-image: -webkit-linear-gradient(-45deg,
rgba(255, 255, 255, .2) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, .2) 50%,
rgba(255, 255, 255, .2) 75%,
transparent 75%,
transparent);
background-image: linear-gradient(-
45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。