利用css3的渐变实现背景图片变暗 作者：七棵菜 日期：2022-11-30 栏目：计算机分类：1 人气：182 `css3`的`linear-gradient()` 函数用于创建一个线性渐变的 "图像"。 为了创建一个线性渐变，你需要设置一个起始点和一个方向（指定为一个角度）的渐变效果。你还要定义终止色。终止色就是你想让*Gecko*去平滑的过渡，并且你必须指定至少两种，当然也会可以指定更多的颜色去创建更复杂的渐变效果。 > 如果起点和终点的颜色相同，那么就是相当于加了一个背景色 #### 语法 > background-image: linear-gradient(direction, color-stop1, color-stop2, ...); 值 | 描述 -|- direction | 用角度值指定渐变的方向（或角度）。 color-stop1, color-stop2,... | 用于指定渐变的起止颜色。 #### 用法 - 渐变。如下：从左到右的红色渐变 ``` /* 为了添加透明度，我们使用 rgba() 函数来定义颜色结点。rgba() 函数中的最后一个参数可以是从 0 到 1 的值，它定义了颜色的透明度：0 表示完全透明，1 表示完全不透明。 */ .line { height: 200px; background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); } ``` - 附加背景色。如下：背景图片变暗 ``` .bg { background-image: url(/assets/map/jiading/body.jpg); background: linear-gradient( rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2) ); } ``` 标签： css3 背景变暗 linear-gradient 上一篇：如何使用mvn命令导入依赖 下一篇：ionic5 NavController 详解 随便看看 2024-02-19 PHP7 运算符“??” 和“?:”的区别 2022-11-30 Linux 后台运行命令 2022-11-25 关于我们 2022-11-30 centos一键系统安装lnmp集成环境 2022-11-30 linux 生成 ssh 公钥 留言
