CSS实现条纹背景

教程大全  / 只看大图  / 倒序浏览   ©

#楼主# 2020-2-12

跳转到指定楼层

马上注册,分享更多源码,享用更多功能,让你轻松玩转云大陆。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

实现方法:CSS线性渐变

  1. linear-gradient()
复制代码
函数用于创建一个表示两种或多种颜色线性渐变的图片。
  1. linear-gradient([ [ [ <angle> | to <side-or-corner> ],]? <color-stop>[, <color-stop>]+);
复制代码

:
描述渐变线的起始点位置。它包含to和两个关键词:第一个指出水平位置left or right,第二个指出垂直位置top or bottom。
:
用角度值指定渐变的方向(或角度)。角度顺时针增长。
:
由一个值组成,而且跟随着一个可选的终点位置(可以是一个百分比值或者是沿着渐变轴的
例如,
  1. background: linear-gradient(orange,blue);
复制代码
意思是背景色从orange向blue渐变,默认方向从上往下,效果如下:

220505y1hwvtsh85bwx3w8.jpg

如果想从左往右渐变,则
  1. background: linear-gradient(to right ,orange,blue);
复制代码

220505h2b3czm0melr0zol.jpg

此外,还可以添加长度或者百分比来控制渐变的过程,例如
  1. background: linear-gradient(to right ,orange 30%,blue 60%);
复制代码
意思是从左往右30%宽度为orange实色,从60%宽度开始为blue实色,中间为渐变部分,效果如下:
220505hjootlhlfcjjpfpz.jpg

如果我们把百分比设置成一样,
  1. background: linear-gradient(to right ,orange 30%,blue 30%);
复制代码
,效果是这样的:
220506ui0l0lvm0ivcii0i.jpg

这不就是最简单的渐变了吗?
由于背景默认会平铺填满,所以我们可以设置
  1. background-size
复制代码
值来控制条纹宽度。由此,我们可以实现竖条纹:

[	DISCUZ_CODE_7	]

220506insd34eweqqdbwma.jpg

横条纹同竖条纹原理一样,就不再赘述。如果要实现45°斜条纹呢?我们同样可以使用
  1. linear-gradient()
复制代码
实现,不过相对比力贫苦。这边推荐使用
  1. repeating-linear-gradient()
复制代码
,用法同
  1. linear-gradient()
复制代码
基本相同,只是色标是无限循环的,直到填满整个背景。例如:

[	DISCUZ_CODE_11	]

效果如图:


220507r4t79ro7woqzw4rv.jpg
分享淘帖
回复

使用道具

您的回复是对作者最大的奖励

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于作者

潇湘乾1

新手猿

  • 主题

    1

  • 帖子

    1

  • 关注者

    0

楼主新帖

Archiver|手机版|小黑屋|云大陆 | 赣ICP备18008958号-4|网站地图
Powered by vrarz.com!  © 2019-2020版权所有云大陆