我们在网页设计中最常见的 CSS 渐变类型是 linear-gradient()。之所以称为“线性”,是因为颜色从左到右、从上到下或以您在某个方向上选择的任何角度渐变。
线性 CSS 渐变:
.background {
background: linear-gradient(to right, rgba(255. 255. 255. 0), rgba(255. 255. 255. 1));
}
这是一个从完全透明(rgba(255. 255. 255. 0))到完全不透明(rgba(255. 255. 255. 1))的水平线性渐变示例。
径向渐变透明:
css复制代码
.background {
background: radial-gradient(circle at center, rgba(255. 255. 255. 0), rgba(255. 255. 255. 1));
}
这是一个从完全透明(rgba(255. 255. 255. 0))到完全不透明(rgba(255. 255. 255. 1))的圆形径向渐变示例。
请根据您的需求调整颜色值和渐变方向。通过改变渐变起始点、终止点和颜色的透明度,您可以实现不同的渐变透明效果。