background属性经典应用（视觉差效果/绘制纸张/绘制棋盘/绘制彩虹/发光的毛毛球/发光按钮/波点背景/彩色饼图/圆环加载指示器)

Crystal328
352 阅读5分钟

1. background-attachment

1.1 经典视觉差效果

  • 为要盖住的图片添加 background-attachment：fixed
    • scroll: 图片随着页面的滚动而滚动，相对于元素本身是固定，不会随着元素的内容而滚走
    • fixed: 固定 背景图片相对于视口固定，相对于元素本身是固定，不会随着元素的内容而滚走（主要用作视觉差效果)
    • local: 背景相对于元素的内容固定（内容/浏览器滚动都会让图片滚动) GIF2025-05-1921-19-43.0d50b4fb.gif
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>视觉差效果</title>
    <style>
        body {
            margin: 0;
            padding: 0;
        }
        .one {
            height: 800px;
            background-image: url(../html+css/images/04-1.webp);
            background-position: center;
            background-size: cover;
            background-attachment: fixed;
        }
        .two {
            height: 1000px;
            background-image: url(../html+css/images/04-2.avif);  
            background-position: center;
            background-size: cover;

        } 
    </style>
</head>
<body>
    <div class="one"></div>
    <div class="two"></div>
</body>
</html>

2. background-clip

2.1将背景图片作为文字的背景颜色

image.png ————————————————————————————————————————————》》》》效果如图

image.png

  • 文字设置半透明
  • 使用background-clip:text
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .one {
            height: 200px;
            font-size: 100px;
            line-height: 200px;
            text-align: center;
            background-image: url('../html+css/images/04-2.avif');
            background-size: cover;
            background-position: center;
            /* 重要代码 */
            color: rgba(0,0,0,.2);
            background-clip: text;
            -webkit-background-clip: text;
        }
    </style>
</head>
<body>
    <div class="one">我是一段文字</div>
</body>
</html>

3. 线性渐变 linear-gradient

3.1 绘制纸张

  1. 创建一个长方形盒子

  2. 绘制从上往下的渐变色背景

  3. 绘制纸张的横线

    • 每个横框从上往下渐变 框宽度与父亲一致 高度50px
    • 要写在背景颜色之前 写的往后的在下面

  4. 添加标签

image.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>绘制纸张</title>
    <style>
        .box {
            width: 500px;
            height: 600px;
            margin: 0 auto;
            padding: 0 20px;
            background-image: 
            linear-gradient(to bottom,transparent 49px, #ddd 49px),
            linear-gradient(to bottom, #fbebed,#fff, #fbebed);
            background-size: auto 50px ,auto auto;
            background-clip: content-box, border-box;
        }
      h1 {
        margin: 0;
        text-align: center;
      }
      p {
        line-height: 50px;
        margin: 0;
      }
    </style>
</head>
<body>
    <div class="box">
        <h1>径向渐变实现纸张效果</h1>
  <p>1、创建一个长方形</p>
  <p>2、绘制从上向下的渐变色背景</p>
  <p>3、绘制纸张的横线</p>
  <p>4、设置横线与纸张左右两边有一定间距</p>
  <p>5、添加h1标签，制作内容标题，并让标题水平居中</p>
  <p>6、添加p标签，添加内容</p>
  <p>7、让文字相对行居中对齐</p>
    
    </div>
</body>
</html>

3.2 绘制棋盘

image.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>绘制棋盘</title>
    <style>
        .board {
            width: 399px;
            height: 399px;
            border: 3px solid #654321;
            border-radius: 5px;
            background-color: #deb887;
            /* 绘制横线竖线 */
            background-image: 
                linear-gradient(to bottom, transparent 39px,  #654321 39px),
                linear-gradient(to right, transparent 39px,  #654321 39px);
                background-size: auto 40px, 40px auto;
        }
    </style>
</head>
<body>
    <div class="board"></div>
</body>
</html>

4. 径向渐变 radial-gradient

4.1 绘制彩虹

image.png

  1. 绘制一个长方形
  2. 中心点在 中下
  3. 指定圆的半径
  4. 圆的大小
  5. 加颜色
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>绘制彩虹</title>
    <style>
        .rainbow {
            width: 600px;
            height: 300px;
            border: 2px solid red;
            background-image: radial-gradient(
                /* 圆形 半径 中心点位置 */
                circle 300px at bottom center,
                white 40%,
                pink 50%,
                  pink 55%,
                red 60%,
                red 65%,
                orange 70%,
                orange 75%,
                skyblue 80%,
                skyblue 85%,
                yellow 90%,
                yellow 100%,
                transparent 100%
            );
        }
    </style>
</head>
<body>
    <div class="rainbow"></div>
</body>
</html>

4.2 发光的毛毛球

image.png

  1. 一个正方形
  2. 圆形渐变
  3. 黄色到透明渐变 透明填充整个容器
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>发光的毛毛球</title>
    <style>
        body {
            background-color: #000;
        }
        .ball {
            width: 200px;
            height: 200px;
            background: radial-gradient( yellow 5%, transparent 70%);
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div class="ball"></div>
</body>
</html>

4.2 发光按钮

image.png

  1. 一个普通按钮
  2. 径向渐变的背景（以中上为渐变点 做一个白色到透明的径向渐变）
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .button {
            width: 100px;
            height: 50px;
            background-color: blue;
            background-image: radial-gradient(circle 50px at top center,rgba(255,255,255,.8),transparent);
            border-radius: 12px;
            text-align: center;
            line-height: 50px;
            color: #fff;
        }
    </style>
</head>
<body>
    <div class="button">发光按钮</div>
</body>
</html>

4.3 绘制波点背景

image.png

  1. 一个长方形盒子
  2. 一个背景大小为一个小盒子 image.png
  3. 小盒子铺满整个背景
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>绘制波点背景</title>
    <style>
        .dot-pattern {
            width: 800px;
            height: 200px;
            border: 1px solid red;
            background-image: radial-gradient(circle 10px at center center,#666 2px, transparent 3px);
            background-size: 20px 20px;
        }
    </style>
</head>
<body>
    <div class="dot-pattern"></div>
</body>
</html>

5. 锥形渐变 conic-gradient

background-image: conic-gradient(
/* angle 顺时针方向的渐变旋转角度 at position 渐变中心点 */ 
angle at position,
/* 开始颜色 */
start-color,
..., 
/* 结束颜色 */
end-color );

5.1 绘制饼图

image.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .pie {
            width: 200px;
            height: 200px;
            border-radius: 50%;
            border: 2px solid red;
            background-image: conic-gradient(from 45deg,
                red 0 35%,
                skyblue 35% 60%,
                yellow 60% 75%,
                green 75% 90%,
                purple 90% 100%
            );
        }
    </style>
</head>
<body>
    <div class="pie"></div>
</body>
</html>

5.2 圆环加载执示器

本质就是锥形渐变，然后不定的旋转
GIF2025-05-2119-50-1411.9fe5caaa.gif

用一个黑色圆形盖在锥形渐变层的上方，就看到如下效果 GIF2025-05-2119-47-46.3e21a46e.gif

暂时做静态（动画后续加上）动画已加

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>加载器</title>
    <style>
        body {
            background-color: #000;
        }

        .progress-container {
            width: 200px;
            height: 200px;
            border: 16px solid #333;
            margin: 100px;
            border-radius: 50%;
            position: relative;
        }

        .progress-bar {
            position: absolute;
            top: -16px;
            left: -16px;
            bottom: -16px;
            right: -16px;
            border-radius: 50%;
            background-image: conic-gradient(#32c5a9, transparent 40%);
        }

        .progress-bar::before {
            content: '';
            display: block;
            width: 12px;
            height: 12px;
            background-color: #fff;
            border-radius: 50%;
            position: absolute;
            top: 2px;
            left: 50%;
            transform: translateX(-50%);
            /* x y 偏移量 模糊度 颜色 */
            box-shadow: 0 0 4px 2px rgb(108, 199, 241);
        }

        .progress-container::after {
            content: '';
            display: block;
            background-color: #000;
            border-radius: 50%;
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
        }

        /* 跳转动画类 */
        .animate-rotate {
            animation: rotate 1s linear infinite reverse;
        }

        @keyframes rotate {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }
    </style>
</head>

<body>
    <div class="progress-container">
        <div class="progress-bar animate-rotate"></div>
    </div>
</body>

</html>
avatar
文章
阅读
粉丝