css 条纹背景效果

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

<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);

多色条纹

1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » css 条纹背景效果

发表评论

提供最优质的资源集合

立即查看 了解详情