条纹背景

最新推荐文章于 2025-05-07 15:31:32 发布

转载最新推荐文章于 2025-05-07 15:31:32 发布 · 47 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/xiaoli52qd/p/6396857.html

本文介绍了如何使用CSS的linear-gradient属性创建水平、垂直及斜向条纹背景的方法，并详细解释了通过调整背景大小和颜色停靠点实现不同效果的技术细节。

水平条纹

1 .test {
2     width: 200px;
3     height: 100px;
4     background:linear-gradient(#fb3 20%,#58a 80%);
5     margin: 0 auto;
6 
7 }

现在容器顶部的20%区域被填充为#fb3实色，而底部20%区域被填充#58a实色。真正的渐变只出现在容器60%的高度区域。

当渐变设置为50%时，已经没有渐变效果，只有两块实色，各占据了background-image一般面积。也可以通过background-size设置尺寸：

1 .test {
2     width: 200px;
3     height: 100px;
4     background:linear-gradient(#fb3 50%,#58a 50%);
5     margin: 0 auto;
6     background-size: 100% 30px;
7 
8 }

效果图：

我们把这两条条纹的高度都缩小到了15px，默认是重复平铺的。

如果我们把第二个色标的位置值设置为0，那它的位置就总是会被浏览器调整为前一个色标的位置值。

1 .test {
2     width: 200px;
3     height: 100px;
4     background:linear-gradient(#fb3 33.3%,#58a 0,#58a 66.6%,yellowgreen 0);
5     margin: 0 auto;
6     background-size: 100% 45px;
7 
8 }

效果图：

垂直条纹

通过在开头加上一个额外的参数来指定渐变的方向。默认是 to bottom .最后，我们还需要把background－size的值颠倒一下。

1 .test {
2     width: 200px;
3     height: 100px;
4     background:linear-gradient(90deg,#fb3 33.3%,#58a 0,#58a 66.6%,yellowgreen 0);
5     margin: 0 auto;
6     background-size: 45px 100% ;
7 
8 }

效果图：

斜向条纹

每个重复的小的单元，要包含四条条纹，只有这样才可以做到无缝拼接。

1 .test {
2     width: 200px;
3     height: 100px;
4     background:linear-gradient(45deg,#fb3 25%,#58a 0,#58a 50%,#fb3 0,#fb3 75%,#58a 0);
5     margin: 0 auto;
6     background-size: 30px 30px  ;
7 
8 }

效果图：

转载于:https://www.cnblogs.com/xiaoli52qd/p/6396857.html