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%);
}
上一篇: 以错误的方式使用动画
下一篇: 返回列表
城市网站导航:无锡网站建设 徐州企业网站定制 常州网站开发哪家好 苏州网站改版 南通网站开发 连云港网站建设 淮安网站建设公司 盐城网站定制 扬州网站改版公司 镇江网站开发 泰州高端网站制作 宿迁高端网站开发 江阴高端网站开发 宜兴建设网站 新沂建设网站 邳州建设网站 常熟建设网站 张家港网站改版 昆山公司网站开发 太仓高端网站制作 丹阳高端网站制作 句容专业建站 泰兴网站制作公司 合肥网站建设 芜湖网站制作 蚌埠网站建设 淮南网站制作哪家好 马鞍山网站建设 铜陵网站制作公司 安庆网站建设公司 黄山网站制作 滁州网站建设 阜阳网站设计 六安网站建设 亳州网站制作 宣城网站建设 巢湖网站建设哪家好 桐城网站制作 天长网站建设 明光网站建设 全椒网站建设 扬中网站建设公司 城市小程序导航: