CSS渐变透明

news2025/1/19 12:49:37

文章目录

一、前言
- 1.1、`MDN`
二、实现
- 2.1、源码
- 2.2、线上源码
三、最后

一、前言

使用场景：在做两个元素的连接处的UI适配时，图片的颜色不能保证一定跟背景颜色或者是主色调保持一致时，会显得比较突兀。

1.1、`MDN`

MDN的文档，点击【前往】。示例如下：

/* 渐变轴为 45 度，从蓝色渐变到红色 */
linear-gradient(45deg, blue, red);

/* 从右下到左上、从蓝色渐变到红色 */
linear-gradient(to left top, blue, red);

/* 色标：从下到上，从蓝色开始渐变，到高度 40% 位置是绿色渐变开始，最后以红色结束 */
linear-gradient(0deg, blue, green 40%, red);

/* 颜色提示：从左到右的渐变，由红色开始，沿着渐变长度到 10% 的位置，然后在剩余的 90% 长度中变成蓝色 */
linear-gradient(.25turn, red, 10%, blue);

/* 多位置色标：45% 倾斜的渐变，左下半部分为红色，右下半部分为蓝色，中间有一条硬线，在这里渐变由红色转变为蓝色 */
linear-gradient(45deg, red 0 50%, blue 50% 100%);

二、实现

2.1、源码

主要就是使用linear-gradient这个css属性实现渐变效果

 <div>
      <div style="background: #f00; width: 200px; height: 100px;" />
      <div style="width: 100%;height: 100%;background: linear-gradient(to bottom, rgba(0, 0, 255, 0), rgb(255 255 255));" />
</div>