CSS渐变透明

2024-01-10 06:23:27

一、前言

使用场景:在做两个元素的连接处的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>

2.2、线上源码

点击【前往

三、最后

本人每篇文章都是一字一句码出来,希望对大家有所帮助,多提提意见。顺手来个三连击,点赞👍收藏💖关注?,一起加油?

文章来源:https://blog.csdn.net/u012804440/article/details/135440092
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。