条纹背景是基于渐变背景。

<div class="bg"></div>

CSS 代码

.bg{
  height: 100px;
  width: 200px;
  background: linear-gradient(#fb3,#58a);
}

css 条纹背景效果

将这两个色标拉近:

background: linear-gradient(#fb3 20%,#58a 80%);

两个色标拉近

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

如果两个颜色都设为50%,就得到了两块均分div背景地实色。

css 条纹背景效果

因为渐变是一种由代码生成的图像,我们能像对待其他任何背景图像那样对待它,而且还可以通过 background-size 来调整其尺寸。

background: linear-gradient(#fb3 50%,#58a 50%);
background-size: 100% 20px;

由于背景在默认情况下是重复平铺的,整个容器其实已经被填满了水平条纹。

css 条纹背景效果

也可以创建不等宽条纹:

background: linear-gradient(#fb3 30%,#58a 30%);

不等宽条纹

如果某个色标的位置值比整个列表中在它之前的色标的位置值都要小,

则该色标的位置值会被设置为它前面所有色标位置值的最大值。

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

我们可以将上面地代码改成:

background: linear-gradient(#fb3 30%,#58a 0);

如果要创建多色条纹:

background:linear-gradient(#fb3 33.3%, #58a 0, #58a 66.6%, yellowgreen 0);

多色条纹

「点点赞赏,手留余香」

0

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » css 条纹背景效果

发表回复