TEL:400-8793-956
当前位置:网站讲堂

对背景渐变图像使用 CSS 渐变

提问者: 近期获赞: 浏览人数: 发布时间:2021-11-29 08:55:11

 你可以用 CSS 渐变做很多事情!甚至用 CSS 替换背景渐变图像。事实上,这就是我对 CSS 背景渐变的探索。

 
我正在构建一个页面,并给出了下面的背景图片,最初是 25MB。这种大小的图像需要永远加载。为了避免不和谐的加载体验,您最初会在页面加载时使用背景颜色,然后在加载后将其与图像交换。或者……您可以完全用 CSS 渐变替换图像。更不用说,这在加载时间上会更高效。
 
有 3 种不同的 CSS 渐变:linear、conic和Radial。每个渐变都使用一个CSS 函数来传递多个颜色参数。颜色可以是 hex、hsla、rgba 或命名颜色的格式。此外,您可以传入方向和角度来指定渐变的形状和过渡。
线性渐变
线性渐变由两种或多种颜色组成,它们在一条直线上相互均匀渐变。您至少需要传入两种颜色(色标)。第一个颜色参数将是顶部的颜色,然后渐变将向下过渡并到达下一个颜色停止点。
元素 {
  背景:线性渐变(#80FFDB,#5390D9);
}
 
您可以将任意数量的颜色传递到线性渐变中。请注意,这需要更多的 CPU 能力来绘制背景。下面是一个有 5 种颜色的例子。
元素 {
  背景:线性渐变(#80FFDB,#64DFDF,#48BFE3,#5390D9,#5E60CE);
}
 
默认情况下,线性渐变渲染颜色停止水平。您可以指定角度的度数作为线性渐变 CSS 函数中的第一个参数来旋转渐变的角度。
使用角度时,0度的起点相当于下面的图像,底部的第一个颜色参数。从这个起点,您可以传入正角或负角。正角度将顺时针旋转渐变,负角度将逆时针旋转渐变。
 
下面的梯度倾斜 45 度。
元素{
  背景:线性梯度(45度,#80FFDB,#5390D9);
}
 
除了传入角度,您还可以传入方向来改变对角线。这个词to是与方向结合的值的一部分。您可以只指定水平边,也可以同时指定水平边和垂直边。
以下是接受的不同价值组合:
to top = 0 deg
元素 {
  背景:线性渐变(到顶部,#80FFDB,#5390D9);
}
 
2. to bottom=180 deg
元素 {
  背景:线性渐变(到底部,#80FFDB,#5390D9);
}
 
3. to left=270 deg
元素 {
  背景:线性渐变(向左,#80FFDB,#5390D9);
}
 
4. to right=90 deg
元素 {
  背景:线性渐变(向右,#80FFDB,#5390D9);
}
 
5. to top right= to right top=45 deg
元素 {
  背景:线性渐变(右上角,#80FFDB,#5390D9);
}
 
6. to top left= to left top=315 deg
元素 {
  背景:线性渐变(左上角,#80FFDB,#5390D9);
}
 
7. to bottom right= to right bottom=135 deg
元素 {
  背景:线性渐变(到右下角,#80FFDB,#5390D9);
}
 
8. to bottom left= to left bottom=225 deg
元素 {
  背景:线性渐变(到左下角,#80FFDB,#5390D9);
}
 
圆锥梯度
圆锥渐变具有围绕中心点旋转的焦点。默认情况下,圆锥渐变的中心从 50% 50% 的中心点开始并朝上。此外,色标间隔均匀。但是,您可以更改圆锥渐变的起始位置并更改色标比例。以下是默认圆锥渐变的示例。
元素 {
  背景:圆锥梯度(#80FFDB,#5390D9);
}
 
圆锥渐变对于饼图和其他图表图形很有用。以下是具有 3 个色标的饼图示例。
元素 {
  背景:圆锥梯度(#80FFDB 0% 33%,#72EFDD 0% 66%,#64DFDF 0% 100%);
}
 
径向渐变
径向渐变从中心点开始。默认情况下,它从中心开始并向外辐射。您可以更改起点并将渐变形状从圆形变为椭圆形。颜色的过渡会向各个方向向外移动。
元素 {
  背景:径向渐变(#80FFDB,#5390D9);
}
 
如果你想要一个椭圆,你需要先ellipse在 CSS 函数中指定,然后再传入颜色和半径的长度或尺寸。
元素 {
  背景:径向渐变(椭圆 50% 400px,#80FFDB 50%,#5390D9 80%,#5E60CE);
}
 
色标
使用所有 CSS 渐变,您可以指定色标的百分比或绝对长度。默认情况下,第一个色标位于0%,最后一个色标位于100%。您可以使用百分比和绝对长度的组合来指定您的色标。
元素 {
  背景:线性渐变(#80FFDB 100px,#5390D9 40%,#7400B8);
}
 
您还可以创建带有色标的硬线。色标需要设置在相同的位置,无论是相同的百分比还是相同的绝对长度值。
元素{
  背景:线性渐变(#80FFDB 600px,#5390D9 600px);
}
元素 {
  背景:线性渐变(#80FFDB 50%,#5390D9 50%);
}
 
就像可以旋转渐变角度的常规线性渐变一样,您也可以将角度传递给硬色停止。
元素 {
  背景:线性梯度(45deg,#80FFDB 50%,#5390D9 50%);
}
 
如果您正在寻找条纹图案,您甚至可以使用重复的线性渐变。
元素 {
  背景:重复线性渐变(#80FFDB,#80FFDB 100px,#5390D9 100px,#5390D9 200px);
}
 
请注意,并非所有浏览器(如 IE11)都支持复杂的线性渐变,例如带有线性渐变的背景图像。在这些情况下,您可能想要一个简单的linear-gradient或background-color复杂的渐变可以优雅地回退到。
元素{
  背景:线性渐变(#80FFDB ,#5390D9 );
  背景图像:url(“图像”),线性梯度(#80FFDB ,#5390D9 );
}
 
CSS 渐变
元素 {
  背景:径向渐变(右下角的椭圆,#EEB1BF 5%,#d42dab 25%,#4d1d63 50%,#030243 100%);
}
上一篇: 以错误的方式使用动画
下一篇: 分享使用的几个有用的CSS属性