CSS之渐变

  • 作用： 渐变被用于很场景，最常见的是给图片添加渐变背景色，目的是突出图片上的文字，让文字看起来更加清晰。

一、线性渐变

在这里插入图片描述

  • 线性渐变：颜色呈直线变化，由浅到深。
  • 做法：
    • background-image: linear-gradient
      (
      to 渐变方向（可省略），
      渐变颜色1 颜色终点位置（可省略），
      渐变颜色2 颜色终点位置（可省略），
      );
  • 渐变方向：
    • top、right、bottom、left；
    • 角度deg
  • 颜色终点位置：百分比
<style>
      div{
        width: 200px;
        height: 200px;
        background-color: #999999;
        /*最简单做法*/
        background-image: linear-gradient(red,green);
        /*复杂做法*/
        background-image: linear-gradient(
          to right,
          red 80%,
          green
        );
      }
</style>
<body>
  <div></div>
</body>

在这里插入图片描述

1.1 线性渐变案例

在这里插入图片描述

 <style>
        .box{
            position: relative;
            margin: 100px auto;
            width: 720px;
        }
        img{
            position: relative;
            width: 720px;
            height: 420px;
        }
        .txt{
            position: absolute;
            left: 50%;
            top: 50%;
            translate: -50% -50%;
            font-size: 80px;
            color: white;
            font-weight: 700;
            font-family:楷体;
            /*让文字在上方，渐变出现时文字更清晰*/
            z-index: 2;
        }
        .mask{
            width: 720px;
            height: 420px;
            position: absolute;
            top: 0;
            left: 0;
            background-image: linear-gradient(
                /*透明*/
                transparent,
                /*半透明*/
                rgba(0,0,0,0.5)
            );
            opacity: 0;
            /*过渡*/
            transition: all 1s;
        }
        .box:hover .mask{
            /*鼠标悬停显示渐变*/
            opacity: 1;
        }
</style>
<body>
    <div class="box">
        <img src="/images/earth.jpg">
        <div class="txt">流浪地球</div>
    <!--    添加一个盒子定位到最外层给背景图添加渐变效果-->
        <div class="mask"></div>
    </div>
</body>

二、径向渐变

在这里插入图片描述

  • 径向渐变：颜色从中心点向四周发散，常用于给按钮添加高光效果，让按钮更加立体。
  • 做法：
    • background-image: radial-gradient
      (
      半径 to 圆心位置，
      渐变颜色1 颜色终点位置（可省略），
      渐变颜色2 颜色终点位置（可省略），
      );
  • 半径：可以有2条，如果有两条渐变圆心则为椭圆形
  • 圆心位置：
    • 像素值
    • top、right、bottom、left
    • 百分比
  <style>
    div{
      width: 100px;
      height: 100px;
      border-radius: 50%;
      /*基础写法  */
      background-image: radial-gradient(
          50px at center center,
          red,
          pink
        );
      /*两条渐变半径*/
      background-image: radial-gradient(
        50px 30px at center center,
        red,
        pink 50%
      );
      /*圆心位置为像素值  */
      background-image: radial-gradient(
           50px  at 50px 30px,
           red,
           pink 50%
      );
    }
    button{
        width: 100px;
        height: 40px;
        background-color: #00BE9A;
        border: 0;
        border-radius: 5px;
        color: #fff;
        /*高光*/
        background-image: radial-gradient(
            30px at 30px 20px,
            rgba(255,255,255,0.5),
            transparent
        );
    }
</style>
<body>
    <div></div>
    <button>按钮</button>
</body>

在这里插入图片描述

# css # 前端
Logo
2048 AI社区

有“AI”的1024 = 2048，欢迎大家加入2048 AI社区

更多推荐

cover

Java后端工程师必看：系统学习AI应用开发，收藏这份进阶指南

avatar 2048 AI社区
cover

Java老兵转型AI开发实战指南：收藏这份从零开始的学习路线，小白也能快速上手大模型

avatar 2048 AI社区
cover

Sora 2 官方接口版完整实操指南：高成功率、原生画质的AI视频创作干货

avatar 2048 AI社区