css颜色与渐变linear-gradient使用实例-css教程-PHP中文网

css颜色与渐变linear-gradient使用实例

P粉602998670

发布： 2025-09-27 23:05:01

原创

949人浏览过

颜色和渐变通过CSS实现视觉提升，支持名称、十六进制、RGB、RGBA等颜色表示，结合linear-gradient可创建多方向、多角度、多色及透明渐变效果，适用于背景与遮罩设计。

css颜色与渐变linear-gradient使用实例

在网页设计中，颜色和渐变是提升视觉效果的重要手段。CSS 提供了丰富的颜色表示方式以及强大的 linear-gradient 功能，可以创建平滑的线性渐变背景。下面通过几个实用示例，帮助你快速掌握它们的用法。

基础颜色表示方法

CSS 支持多种颜色写法，常见的有：

颜色名称：如 red、blue、green
十六进制：如 #ff0000（红色）、#00ff00（绿色）
RGB 值：如 rgb(255, 0, 0)
RGBA 带透明度：如 rgba(255, 0, 0, 0.5)

这些颜色值可以直接用于背景、文字、边框等属性。

简单线性渐变背景

使用 linear-gradient 可以从一种颜色平滑过渡到另一种。语法如下：

立即学习“前端免费学习笔记（深入）”；

background: linear-gradient(direction, color1, color2, ...);

例如，创建一个从上到下的蓝色到白色的渐变：

Cutout老照片上色

Cutout.Pro推出的黑白图片上色

查看详情

<font face="Courier New">
.example-1 {
  width: 200px;
  height: 100px;
  background: linear-gradient(#007bff, #ffffff);
}
</font>

登录后复制

如果不指定方向，默认是从上到下。你也可以指定角度或关键词：

to bottom：从上到下（默认）
to right：从左到右
45deg：45度角（顺时针）

多色与角度渐变

你可以添加多个颜色节点，实现更丰富的效果。比如彩虹色条：

<font face="Courier New">
.rainbow {
  height: 50px;
  background: linear-gradient(
    to right,
    red, orange, yellow, green, blue, indigo, violet
  );
}
</font>

登录后复制

或者使用角度创建对角渐变：

<font face="Courier New">
.diagonal {
  width: 200px;
  height: 200px;
  background: linear-gradient(135deg, #ff9a9e, #fad0c4);
}
</font>

登录后复制

带透明度的渐变遮罩

结合 RGBA 颜色，可以制作出透明渐变，常用于图片遮罩：

<font face="Courier New">
.overlay {
  position: relative;
  background-image: url('your-image.jpg');
  background-size: cover;
}

.overlay::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.8), rgba(0,0,0,0));
  z-index: 1;
}
</font>

登录后复制

这个例子在图片上叠加了一个从底部黑透明到顶部全透明的渐变，增强文字可读性。

基本上就这些常用场景。掌握颜色和 linear-gradient 的搭配，能让你的页面更具层次感和现代感。不复杂但容易忽略细节，比如方向写法和浏览器兼容性（现代浏览器都支持）。多试几种组合，效果立竿见影。

以上就是css颜色与渐变linear-gradient使用实例的详细内容，更多请关注php中文网其它相关文章！