CSS 中的渐变背景

当前位置：主页 > 学无止境 > WEB前端 > CSS >

Vue React JavaScript Angular CSS HTML

CSS 中的渐变背景

作者：迹忆客最近更新：2023/04/27 浏览次数：

这个简单的指南是关于 CSS 属性的使用，这些属性可用于为 HTML 元素定义类似彩虹的渐变背景。

CSS 渐变

我们可以使用 CSS 渐变显示两种或多种指定颜色之间的无缝过渡。 CSS 识别三种不同的渐变类型：

线性渐变（向左、向右、向上、向下、对角线移动）
径向渐变（由它们的中心定义）
锥形渐变（围绕中心点旋转）

渐变可以用在背景中，也可以用在任何可以使用图像的地方。渐变可以消除以前用于获取类似效果的位图图形图像文件的需要，因为它们是动态生成的。

渐变也可以立即调整大小，并且在放大时比位图图像看起来更好，因为浏览器会生成它们。

我们将从线性渐变开始讨论适用于所有渐变类型的特性。从那里，我们将继续进行径向和圆锥渐变。

线性渐变

最好定义至少两个色标以创建线性渐变。我们定义了平滑过渡所需的一些颜色。

这些颜色称为色标。您可以指定起点和方向（或角度）以及渐变效果。

语法 - 线性渐变：

background-image: linear-gradient(direction, color1, color2, ...);

允许指定任意数量的颜色。方向也是一个可选参数；默认情况下，方向是从上到下线性的。

以下 HTML 页面包含一个高度为 100 像素的 div 和一个渐变背景图像。

<head>
<style>
#myBlock {
  height: 100px;
  background-image: linear-gradient(yellow, grey);
}
</style>
</head>
<body>
<h1>Linear Gradient - In Top to bottom Direction</h1>

<div id="myBlock"></div>
</body>

请注意 ，我们没有指定渐变的方向，因此将其设置为从上到下的方向，因为它是方向的值。

此外，我们还可以用名称或角度指定任何方向。下面的例子设置了从左到右的渐变方向。

#myBlock {
  height: 100px;
  background-image: linear-gradient(to right,blue,pink);
}
<body>
<h1>Linear Gradient - In Top to bottom Direction</h1>

<div id="myBlock"></div>
</body>

我们可以在对角线位置指定方向。为此，应指定水平和垂直方向的起始位置。

#myBlock {
  height: 100px;
  background-image: linear-gradient(to bottom right,grey,yellow,orange);
}
<body>
<h1>Linear Gradient - In Top to bottom Direction</h1>

<div id="myBlock"></div>
</body>

您可以指定方向角以更好地控制颜色设置。

#myBlock {
  height: 100px;
  background-image: linear-gradient(160deg,grey,yellow,orange);
}
<body>
<h1>Linear Gradient - In Top to bottom Direction</h1>

<div id="myBlock"></div>
</body>

定位你的颜色

您的色标不必留在默认位置。您可以通过给它一个零、一个或两个百分比的值来调整每个人的位置。

指定为百分比的位置的起点和终点分别为 0% 和 100%。但是，如果需要，可以使用这些范围之外的值来实现所需的结果。

如果您不指定位置，系统会自动为您确定该特定色标的位置。第一个和最后一个色标将分别位于 0% 和 100%，任何其他色标将位于其相邻色标之间的中间。

考虑以下示例，其中我们使用三种颜色并以三种方式指定它们的位置：一种使用 px，一种使用百分比，最后一种保留原样，以便相应地设置其位置。

#myBlock {
  height: 100px;
   background: linear-gradient(to right, yellow 28px, red 77%, magenta);
}
<body>
<h1>Linear Gradient - In Top to bottom Direction</h1>

<div id="myBlock"></div>
</body>

径向渐变

与线性渐变相反，径向渐变从中心点向外辐射。那个中心点的位置由你决定，也可以做成椭圆形或圆形。

与线性渐变类似，径向渐变只需要使用两种颜色。默认情况下，渐变的中心位于 50% 标记处，并且它是椭圆形的以匹配框的纵横比：

语法 - 径向渐变：

background-image: radial-gradient(shape size at position, start-color, ..., last-color);

例如，以下 CSS 代码创建了具有三种颜色的径向渐变。如果我们不指定任何位置或形状，它会从中心点开始均匀分布所有颜色。

#myBlock {
  height: 100px;
   background: radial-gradient(red, yellow, magenta);
}
<body>
<h1>Linear Gradient - In Top to bottom Direction</h1>

<div id="myBlock"></div>
</body>

径向渐变的大小

与线性渐变不同，径向渐变允许您指定大小。 closest-corner、closest-side、farthest-corner 和 farthest-side 值都在选项中，farthest-corner 为默认值。

椭圆和圆都有其他尺寸选项，包括长度和百分比。以下示例显示了不同的大小及其相应的输出。

#myBlock {
  height: 100px;
   background-image: radial-gradient(closest-side at 65% 50%, magenta, yellow, beige);
}
<body>
<h1>Linear Gradient - In Top to bottom Direction</h1>

<div id="myBlock"></div>
</body>
#myBlock {
  height: 100px;
   background-image: radial-gradient(farthest-side at 65% 50%, magenta, yellow, beige);
}
<body>
<h1>Linear Gradient - In Top to bottom Direction</h1>

<div id="myBlock"></div>
</body>

锥形渐变

锥形渐变是一种渐变类型，其中颜色围绕定义的中心点旋转（而不是从中心辐射）。饼图和色轮是圆锥渐变的两个例子，但它们也可以用来制作棋盘和一些更有趣的效果。

conic-gradient 语法等同于 radial-gradient 语法。但是，色标必须仅以度数和百分比为单位进行定义，而不是绝对长度。

它们还必须放置在渐变圆弧周围，而不是放置在从渐变中心出现的渐变线上。

语法 - 锥形渐变：

background-image: conic-gradient([angle] [position,] color [degree], color [degree], ...);

默认位置和角度分别为 0 和中心。

例如，如果不指定度数，渐变的颜色将均匀分布在中心点周围。

#myBlock {
  height: 100px;
   background-image: conic-gradient(red, yellow, cyan);
}
<body>
<h1>Linear Gradient - In Top to bottom Direction</h1>

<div id="myBlock"></div>
</body>

锥形梯度的位置

与 Radial Gradients 类似，也可以在圆锥渐变中指定中心点的位置。

下面的代码示例指定中心点的位置以及所有颜色的度数。

#myBlock {
  height: 100px;
   background-image: conic-gradient(at 10% 40%, cyan 10%, magenta 30%, yellow 50%);
}
<body>
<h1>Linear Gradient - In Top to bottom Direction</h1>

<div id="myBlock"></div>
</body>

改变渐变的角度

您定义的颜色列表通常均匀分布在圆周围。要指定圆锥渐变的起始角度，请使用 from 关键字并在其后指定角度。

我们还可以通过在色标后添加角度或长度来指定色标的不同位置。以下示例定义了用于设置圆锥渐变中心的角度。

#myBlock {
  height: 100px;
   background-image: conic-gradient(from 48deg, red, orange 40%, yellow 65%, green);
}
<body>
<h1>Linear Gradient - In Top to bottom Direction</h1>

<div id="myBlock"></div>
</body>

总结

我们有多个选项可以让我们设置渐变背景。与所有示例一样，我们设置了 div 元素的渐变背景。

在类似的模式中，可以使用任何 HTML 元素设置此背景，前提是它支持背景图像的应用。

上一篇：CSS 中的 First Of Class

下一篇：使用 CSS 的可拉伸背景图像

转载请发邮件至 1244347461@qq.com 进行申请，经作者同意之后，转载请以链接形式注明出处

本文地址：

覆盖 Bootstrap CSS

发布时间：2023/04/28 浏览次数：59 分类：CSS

本文介绍的是著名的 CSS UI 框架 Bootstrap。我们将讨论使用自定义样式覆盖 Bootstrap CSS 的过程。

使用 CSS 制作带圆角的 HTML 表格

发布时间：2023/04/28 浏览次数：107 分类：CSS

这个简短的文章是关于在 HTML 页面上制作圆角表格的 CSS 样式。使用 CSS 制作带圆角的 HTML 表格使图像、表格或 div 段的角变圆的属性是 border-radius。

CSS 设置轮廓 outline 的半径

发布时间：2023/04/28 浏览次数：123 分类：CSS

在本文中，用户将学习如何为 outline 属性设置圆角，与 border-radius 属性相同。在这里，我们已经解释了将圆角应用于轮廓属性的不同方法。

使用 CSS 居中视频

发布时间：2023/04/28 浏览次数：73 分类：CSS

在本文中，用户将学习仅使用 CSS 将 <video> 元素居中。我们已经在下面解释了使用 CSS 使视频居中的多种方法。

使用 CSS 居中内联块

发布时间：2023/04/28 浏览次数：108 分类：CSS

在本文中，我们将创建多个 HTML 元素并将其显示设置为 inline-block。之后，我们将学习使用 display: inline-block 将所有元素居中。

使用 CSS 添加透明边框

发布时间：2023/04/28 浏览次数：98 分类：CSS

在本文中，我们将讨论在 HTML 中的图像、按钮或任何其他对象周围创建透明边框。透明边框是图像或对象周围的边框，可改善用户体验。

使用 CSS 向上移动文本

发布时间：2023/04/28 浏览次数：153 分类：CSS

有时，在开发网页时，我们将文本放在底部或页脚中，因此我们可能需要在文本下方留一个空格并将文本上移。我们将学习如何使用 css 从网页底部向上移动文本。

使用 CSS 和 JavaScript 制作文本闪烁

发布时间：2023/04/28 浏览次数：146 分类：CSS

本文提供了使用 CSS、JavaScript 和 jQuery 使文本闪烁的详细说明。

CSS 防止文本选择

发布时间：2023/04/28 浏览次数：75 分类：CSS

在本文中，我们讨论了防止文本选择和使用具有 none 值的 user-select 属性。此外，您还将了解如何为不同的 Web 浏览器使用该属性。

迹忆客专注技术分享