知识库
知识改变命运

CSS生成器之如何利用CSS生成渐变背景详细讲解

【上云必备】上云仅¥102/年

CSS渐变是属于数据类型图像的功能之一。CSS渐变生成器用于两种或多种颜色之间的各种转换,因此可以用作元素的背景。为了以更虚拟的方式展示功能,可以将渐变定义为一个块,在其中以开发人员希望的方式转换两种颜色。

CSS渐变语法和类型

CSS渐变主要有两种类型。第一种是线性梯度,第二种是径向梯度。使用线性渐变,可以确保两种或更多种颜色(例如,水平,垂直等)的线性过渡。另一方面,径向渐变采用中心点和形状来进行颜色过渡。

  • 以下是用于在CSS中创建线性渐变的语法:
background-image: linear-gradient(direction/angle, color1, color2, color3...)

 

  • 在这里,开发人员可以选择定义方向(向左,向底部等)或使用角度自定义其渐变。
  • CSS中的“径向渐变”使用以下语法创建:
background-image: radial-gradient(shape/size 'at' position, color1, color2, color3...)

 

  • 如果参数是定型的,则可以是圆形或椭圆形。如果参数为size,则可以使用四个值,即最近侧,最近角,最远侧,最远角。

CSS梯度生成器的示例

让我们看一些示例,并学习CSS中渐变功能的用法。

1.通过外部CSS的两种颜色的线性渐变

  • 首先,我们将使用此示例的外部样式创建一个CSS文件。我们将创建具有不同梯度方向的ID,以便可以显示所有值。可以通过以下方式写入这些ID。可以根据要求实现其他功能。

码:

#linear1
{
height: 50px;
width: 100px;
background-image: linear-gradient(to bottom,  pink, purple );
}

 

  • 另外,我们可以使用角度而不是方向来添加一个ID,以定义两种颜色的过渡。语法如下:

码:

#linearAngle
{
height: 50px;
width: 100px;
background-image: linear-gradient(50deg,  pink, purple );
}

 

  • 最后,完整的CSS文件应如下所示:(grad.css)

码:

#linear1
{
height: 50px;
width: 100px;
background-image: linear-gradient(to bottom,  pink, purple );
}
#linear2
{
height: 50px;
width: 100px;
background-image: linear-gradient(to right,  pink, purple );
}
#linear3
{
height: 50px;
width: 100px;
background-image: linear-gradient(to top,  pink, purple );
}
#linear4
{
height: 50px;
width: 100px;
background-image: linear-gradient(to left,  pink, purple );
}
#linearAngle
{
height: 50px;
width: 100px;
background-image: linear-gradient(50deg,  pink, purple );
}

 

  • 现在,我们将创建一个HTML页面。由于这是外部CSS,因此我们将首先在页面的标题部分调用CS文件。
  • 此外,我们将通过不同的<div>元素/块调用所有ID。HTML文件的编码如下:

码:

<html>
<head>
<title>Linear Gradient Test</title>
<link rel = "stylesheet" href = "grad.css">
</head>
<body>
<h2>This is linear gradient with Top to Bottom linear transition</h2>
<div id="linear1"></div>
<h2>This is linear gradient with Left to Right linear transition</h2>
<div id="linear2"></div>
<h2>This is linear gradient with Bottom to Top linear transition</h2>
<div id="linear3"></div>
<h2>This is linear gradient with Right to Left linear transition</h2>
<div id="linear4"></div>
<h2>This is linear gradient with 50 deg linear transition</h2>
<div id="linearAngle"></div>
</body>
</html>

 

  • 将此代码另存为HTML文件并在浏览器中打开,将获得类似于以下屏幕截图的结果:

输出:

 

2.使用多种颜色的对角线过渡的线性渐变。

  • 我们也可以使用多个方向创建对角渐变。
  • 在此示例中,我们将演示如何创建对角过渡的线性渐变。我们将在此演示中使用外部CSS。
  • 我们将为梯度创建对角过渡的CSS ID。我们可以使用两种以上的颜色来获得更好的过渡效果。最终的CSS文件应类似于以下代码:

码:

#linearDiag
{
height: 100px;
width: 400px;
background-image: linear-gradient(to left bottom, indigo,blue, green, yellow, orange, red);
}

 

现在,我们将创建一个HTML页面。在标头部分中调用外部CSS文件后,我们将为主体部分编码,以便使用在CSS文件中创建的ID。最终的HTML代码应如下所示:

码:

<html>
<head>
<title>Linear Diagonal Gradient Test</title>
<link rel = "stylesheet" href = "grad.css">
</head>
<body>
<h2>This is linear diagonal gradient for right to left towards bottom transition</h2>
<div id="linearDiag"></div>
</body>

 

  • 要获取输出,请保存HTML文件并通过浏览器将其打开。它应该类似于以下屏幕截图:

输出:

 

3.通过外部CSS使用三种颜色的径向渐变。

  • 在此示例中,我们将使用外部样式,因此,首先,我们将创建一个CSS文件。
  • 在CSS文件中,我们将为径向渐变编写带有不同参数集(位置,形状,颜色商等)的各种ID。最终的CSS代码应如下所示:

码:

#radi1
{
height: 100px;
width: 100px;
background-image: radial-gradient(yellow, orange, red);
}
#radi2
{
height: 100px;
width: 100px;
background-image: radial-gradient(yellow 5%, orange 10%, red 20%);
}
#radi3
{
height: 100px;
width: 100px;
background-image: radial-gradient(closest-corner at 50% 70%, green, blue, purple);
}
#radiCirc
{
height: 100px;
width: 100px;
background-image: radial-gradient(circle, red, yellow, orange);
}

  • 我们将创建一个HTML文件,并在标题部分中调用样式表。在主体部分,我们将使用CSS代码中定义的每个ID创建不同的<div>块。HTML应该类似于以下代码:

码:

<html>
<head>
<title>Radial Gradient Demonstration</title>
<link rel = "stylesheet" href = "radial.css">
</head>
<body>
<h2>This is default radial gradient:</h2>
<div id="radi1"></div>
<h2>This is radial gradient with color quotients defined:</h2>
<div id="radi2"></div>
<h2>This is radial gradient with direction and position defined:</h2>
<div id="radi3"></div>
<h2>This is radial gradient in circular shape:</h2>
<div id="radiCirc"></div>
</body>
</html>

 

  • 保存此文件并通过浏览器打开将提供以下输出:

输出:

 

说明:上面的示例涵盖了CSS渐变的大多数基本用法。对于开发人员来说,还有另一种选择,他们可以重复自定义线性渐变多次。这可以通过函数repeating-linear-gradient()实现。可以传递类似于线性梯度的参数,并获得重复的结果。

赞(0)
未经允许不得转载:知鸟云知识库 » CSS生成器之如何利用CSS生成渐变背景详细讲解
分享到: 更多 (0)

惟创新者进,惟创新者强,惟创新者胜

云服务器域名注册