《css揭秘》笔记（五），条纹背景

最新推荐文章于 2024-05-24 19:40:36 发布

高崖残雪已无多

最新推荐文章于 2024-05-24 19:40:36 发布

阅读量300

点赞数

分类专栏：前端 css

本文链接：https://blog.csdn.net/PeZXO/article/details/106148836

版权

css 同时被 2 个专栏收录

16 篇文章

订阅专栏

前端

15 篇文章

订阅专栏

《css揭秘》笔记（五），条纹背景

- 条纹背景

条纹背景

现在我们需要条纹的背景，而且不通过加载图片的方式，而是以css的方式形成，现给出以下解决方案：

解决方案

通过线性渐变可以很好地得到条纹背景效果：

.box11{
  margin: 1.25em;
  width: 12.5rem;
  height: 12.5rem;
  background: linear-gradient(#fb3,#58a);
}

在这里插入图片描述

还可以通过百分比的方式来控制两种颜色过渡时占据的空间大小。

.box12{
  margin: 1.25em;
  width: 12.5rem;
  height: 12.5rem;
  background: linear-gradient(yellow 25%, skyblue 75%);
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ezgG9Upb-1589543924035)(2背景边框/img/16.png)]

background: linear-gradient(yellow 25%, skyblue 75%);，yellow 25%意味着从开始到25%的位置是黄色，而skyblue 75%则意味着从75%到结束位置是天蓝色，中间从25%到75%则是从黄色过渡到蓝色的空间。

如果使过渡的空间位置为0，即能生成条纹状背景：

.box13{
  margin: 1.25em;
  width: 12.5rem;
  height: 12.5rem;
  background: linear-gradient(yellow 50%, skyblue 50%);
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PKcmw5Ez-1589543924038)(2背景边框/img/17.png)]

我们可以通过background-size来控制背景条纹的大小，background-size为两个值时，第一个值用于指定背景图片宽度，第二个值用于指定背景图片高度：

.box14{
  margin: 1.25em;
  width: 12.5rem;
  height: 12.5rem;
  background: linear-gradient(yellow 50%, skyblue 50%);
  background-size: 100% 30px;
}

由于背景默认是重复的，所以背景会被多条条纹填充完：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hYyLMVfy-1589543924052)(./2背景边框/img/18.png)]

我们如果想要得到不等宽的条纹，只需修改颜色的起始位置或者结束位置。

.box15{
  margin: 1.25em;
  width: 12.5rem;
  height: 12.5rem;
  background: linear-gradient(yellow 25%, skyblue 25%);
  background-size: 100% 30px;
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZIxlH7I7-1589543924064)(2背景边框/img/19.png)]

如果后一个颜色的位置值设置的要比前一个颜色的位置值要小，那么它始终将以前一个颜色结束的位置作为起始位置。

.box16{
  margin: 1.25em;
  width: 12.5rem;
  height: 12.5rem;
  background: linear-gradient(yellow 20%, skyblue 0);
  background-size: 100% 30px;
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VM8aO7ra-1589543924070)(./img/../2背景边框/img/20.png)]

在linear-gradient中善用后一颜色位置值为0可以得到多条条纹。

.box17{
  margin: 1.25em;
  width: 12.5rem;
  height: 12.5rem;
  background: linear-gradient(yellow 20%,skyblue 0, skyblue 60%,purple 0);
  background-size: 100% 30px;
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-S96ifEfK-1589543924075)(2背景边框/img/21.png)]

垂直条纹

垂直条纹与水平条纹类似，只需要在线性渐变的参数前添加方向值：

.box18{
  margin: .625rem;
  width: 12.5rem;
  height: 12.5rem;
  background: linear-gradient(to right,yellow 40%,skyblue 0);
  background-size:30px 100%;
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-farFetQ2-1589543924078)(2背景边框/img/22.png)]

水平条纹是因为线性渐变的方向值默认是to bottom，除了to right，也可以用95deg这样的角度值。

修改了方向值还需要修改background-size，这个属性决定背景在宽度与高度上占据的大小。

斜向条纹

如果你以为想要得到45度斜向的条纹,只需要把linear-gradient第一个有关方向的参数设定为45deg就行了，那么就错了：

.box19{
  margin: .625rem;
  width: 12.5rem;
  height: 12.5rem;
  background: linear-gradient(45deg,yellow 40%,skyblue 0);
  background-size:30px 30px;
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KxKS9s32-1589543924080)(2背景边框/img/23.png)]

从上图中可以看到生成的背景实际上是重复的三角形拼合而成。

如果想要得到重复的斜向条纹，可以使用repeating-linear-gradient设置。

.box20{
  margin: .625rem;
  width: 6.25rem;
  height: 6.25rem;
  background: repeating-linear-gradient(45deg,yellow 0, yellow 15px,skyblue 0,skyblue 30px);
}