是阿琳呐 2022-10-09 12:46 采纳率: 11.8%
浏览 115
已结题

重复性线性渐变颜色后面的百分比代表什么，

img

img


重复性线性渐变，颜色后面的百分比代表什么，为什么会重复5次，谁决定的

  • 写回答

8条回答 默认 最新

  • 一把编程的菜刀 2022-10-09 14:03
    关注

    background: repeating-linear-gradient(angle | to side-or-corner, color-stop1, color-stop2, ...);
    其中：
    1、angle
    渐变的角度，0deg到360deg，也可以是负数。默认值180deg。除了deg可以表示角度之外，turn、grad、rad，都可以表示角度。比如一个满圆360deg=1turn。
    2、side-or-corner
    用方位来表示角度，比如 to top表示0deg，to bottom 表示180deg，to right 表示90deg，to left 表示270deg。其实就是y轴的顺时针旋转。
    也可以 to left top 表示从右下到左上的对角线。to left bottom 表示从右上到左下的对角线。 默认是从上往下。
    3，color-stop1, color-stop2 ....
    每一个color-stop都由颜色和位置组成。
    颜色是必须值，位置可以是固定像素值，也可以是百分比值。多个颜色用逗号隔开。
    比如： #ff8 50%，rgba(255,255,255, .6) 120px，transparent 12%等。
    其实重复渐变有点像ps里面的填充图案，定义一个图案为基本单元，然后在一个区域里面进行平铺，达到重复的目的。
    例子：

    <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>渐变</title> 
<style>
#grad1 {
  height: 200px;
  background-image: repeating-linear-gradient(45deg,red,blue 7%,green 10%);
}

#grad2 {
  height: 200px;
  background-image: repeating-linear-gradient(190deg,red,blue 7%,green 10%);
}

#grad3 {
  height: 200px;
  background-image: repeating-linear-gradient(red,blue 7%,green 10%);
}
</style>
</head>

<body>
<h3>重复线性渐变</h3>
<p>45 度线性渐变，从红色到蓝色：</p>
<div id="grad1"></div>
<p>190 度线性渐变，从红色到蓝色：</p>
<div id="grad2"></div>

<p>线性渐变，从红色到蓝色：</p>
<div id="grad3"></div>
</body>
</html>

    img

    评论 编辑记录

报告相同问题？

问题事件

  • 已结题 （查看结题原因） 10月16日
  • 赞助了问题酬金15元 10月9日
  • 赞助了问题酬金1元 10月9日
  • 创建了问题 10月9日