在网页中使用 CSS3 背景色渐变

  • Z时代
  • 2024-01-10
  • 分类：IT

渐变可以创建类似于彩虹的效果，低版本的浏览器不得不使开发者用图片来实现，CSS3 将会轻松实现网页渐变效果，CSS 渐变新类型的 <image> 的 CSS3 图片模块添加。使用 CSS 渐变可以显示两个或多个指定的颜色之间的平滑过渡。

在网页中使用 CSS3 背景色渐变

这可以让您避免使用这些效果的图像，从而减少下载时间和带宽使用率。此外因为是由浏览器产生的效果，渐变对象更好看放大时，你可以调整你的布局更加灵活，浏览器都支持两种类型的渐变：线性，线性渐变功能定义，径向，定义为径向渐变。

线性渐变

要创建一个线性渐变，设置一个起点，沿着它的方向（角度​​）渐变效果。你还可以定义颜色停止。颜色站你想要的颜色的 Gecko 渲染之间的平稳过渡，你必须指定其中至少两个，但可以指定创建更复杂的渐变效果。

简单的线性渐变

这里开始中心（水平）和顶部（垂直）的线性渐变，并开始蓝色，白色过渡。

basic_linear_bluetop

background: -prefix-linear-gradient(top, blue, white);
background: linear-gradient(to bottom, blue, white);

改变运行的方向从左至右：

basic_linear_blueleft

background: -prefix-linear-gradient(left, blue, white); 
background: linear-gradient(to right, blue, white);

可以使渐变对角线的指定水平和垂直起始位置运行。例如：

basic_linear_bluetopleft

background: -prefix-linear-gradient(left top, blue, white); 
background: linear-gradient(to bottom right, blue, white);

使用角度

如果你不指定一个角度，一种是自动确定的，根据给定的方向上。如果您想更多的控制权的梯度方向，你可以专门设置的角度。例如下面的两个梯度，第一个朝着正确的方向，而第二个有70度的角度。

linear_gradient_angle

一个在右边使用CSS是这样的：

background: linear-gradient(70deg, black, white);

被指定为一个水平线之间的角度和梯度线的角度，会逆时针旋转。换句话说，0度创建一个从底部到顶部的垂直梯度，而90度产生一个左到右的水平梯度：

linear_red_angles

background: linear-gradient(<angle>, red, white);

注：一些浏览器实现，前缀，旧草案的规范，其中0度 指向右边，而不是顶端。注意前缀和标准线性梯度混合时的角度值。一个简单的公式要记住的是90 – X = Y，其中x是标准用法，y是非标准，供应商前缀的用法。

颜色停止

颜色停止点沿着渐变线，在该位置，将有一个特定的颜色。可以被指定为线的长度的百分比，或作为绝对长度的位置。您可以指定多种颜色停止，只要你喜欢，为了达到预期的效果。

如果你指定的位置作为一个百分比，0％代表的出发点，而100％表示终点，但是，您可以使用该范围以外的值，如果需要得到你想要的效果。

例如三种颜色，这个例子是指定三种颜色，并且颜色的作用范围不是均等的：

linear_colorstops1

background: -prefix-linear-gradient(top, blue, white 80%, orange);
background: linear-gradient(to bottom, blue, white 80%, orange);

需要注意的是第一个和最后的颜色停止不指定一个位置，正因为如此，分别为0％和100％的值被自动分配。中间色站指定的80％的位置，把它朝下方的方式。

例如间隔均匀的色站，下面是一个例子，使用各种各样的颜色，均匀间隔：

linear_rainbow

background: -prefix-linear-gradient(left, red, orange, yellow, green, blue);
background: linear-gradient(to right, red, orange, yellow, green, blue);

请注意，彩色没有指定的位置时，自动间隔均匀。

透明度和渐变

渐变支持透明度。例如，可以使用当前堆叠多个背景时，创建背景图像上的衰落的影响。例如下面的显示效果：

linear_multibg_transparent2

background: -prefix-linear-gradient(left, rgba(255,255,255,0), rgba(255,255,255,1)), url(http://foo.com/image.jpg);
background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,1)), url(http://foo.com/image.jpg);

背景堆叠与第一个指定的背景之上，每一个连续的背景越远。通过堆叠背景这样，您可以创建非常有创意的效果。

径向渐变

指定径向渐变的使用径向梯度 函数符号。语法是类似于线性渐变，除了可以指定渐变的结束形状（是否应该是圆形或椭圆形），以及它的大小。默认情况下，结束形状是一个椭圆，按相同比例比容器的盒子。

颜色停止

您可以指定颜色停止以同样的方式为线性渐变。渐变线延伸在各个方向上从起始位置，例如间隔均匀的色站，默认情况下，线性渐变，间隔均匀的色站：

radial_gradient_even

background: radial-gradient(red, yellow, rgb(30, 144, 255));

例如明确间隔的颜色停止，在这里，我们指定的颜色站的具体位置：

radial_gradient_varied

background: radial-gradient(red 5%, yellow 25%, #1E90FF 50%);

渐变大小

这是径向渐变从线性梯度不同的领域之一。你可以提供一个大小定义的大小的圆形或椭圆形的点的值，该值指定。这说明具体的大小常数。

例最近端为椭圆，此椭圆使用的最接近端的大小的值，表示从起点（中心）的距离的大小被设置为最接近的侧封闭框。

radial_ellipse_size1

background: radial-gradient(ellipse closest-side, red, yellow 10%, #1E90FF 50%, white);

例如最远的角落省略号，这个例子是前一个相似，不同的是它的大小被指定为最远的角，从起点的距离，从起点封闭箱最远的角落的梯度的大小设置。

radial_ellipse_size2

background: radial-gradient(ellipse farthest-corner, red, yellow 10%, #1E90FF 50%, white);

例最近端为界，此示例中使用最接近端，它决定圆的大小的起点（中心）之间的距离最接近的侧。

radial_circle_size1

background: radial-gradient(circle closest-side, red, yellow 10%, #1E90FF 50%, white);

在这里，圆的半径是框的高度的一半，因为从开始点的顶部和底部边缘的距离相等，接近的左边缘和右边缘。

重复渐变

linear-gradient 和 radial-gradient 属性不支持自动重复的色标。然而 repeating-linear-gradient 和 repeating-radial-gradient 属性都可以提供这种功能。

例如重复线性渐变，这个例子使用 repeating-linear-gradient 创建一个渐变：

repeating_linear_gradient

background: repeating-linear-gradient(-45deg, red, red 5px, white 5px, white 10px);

另一个例子，使用重复线性梯度。

repeat_background_gradient_checked

background-color: #000;
background-image: repeating-linear-gradient(90deg, transparent, transparent 50px,
    rgba(255, 127, 0, 0.25) 50px, rgba(255, 127, 0, 0.25) 56px, transparent 56px, transparent 63px,
    rgba(255, 127, 0, 0.25) 63px, rgba(255, 127, 0, 0.25) 69px, transparent 69px, transparent 116px,
    rgba(255, 206, 0, 0.25) 116px, rgba(255, 206, 0, 0.25) 166px),
repeating-linear-gradient(0deg, transparent, transparent 50px, rgba(255, 127, 0, 0.25) 50px,
    rgba(255, 127, 0, 0.25) 56px, transparent 56px, transparent 63px, rgba(255, 127, 0, 0.25) 63px,
    rgba(255, 127, 0, 0.25) 69px, transparent 69px, transparent 116px, rgba(255, 206, 0, 0.25) 116px,
    rgba(255, 206, 0, 0.25) 166px),
repeating-linear-gradient(-45deg, transparent, transparent 5px, rgba(143, 77, 63, 0.25) 5px,
    rgba(143, 77, 63, 0.25) 10px),
repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(143, 77, 63, 0.25) 5px,
    rgba(143, 77, 63, 0.25) 10px);

例如重复径向渐变，这个例子使用重复径向梯度创建一个渐变：

repeating_radial_gradient

background: repeating-radial-gradient(black, black 5px, white 5px, white 10px);

以上是 在网页中使用 CSS3 背景色渐变 的全部内容， 来源链接： utcz.com/p/231796.html

回到顶部