当前位置：首页 > news >正文

CSS Background 相关属性详解文字镂空效果

news 2025/7/5 6:08:16

CSS Background 相关属性详解

CSS 提供了丰富的背景属性，用于控制元素的背景样式。以下是所有 background 相关属性的详细介绍：

1. 基础背景属性

`background-color` - 背景颜色

div {background-color: #ff0000;    /* 十六进制 */background-color: rgb(255,0,0); /* RGB */background-color: rgba(255,0,0,0.5); /* RGBA（带透明度） */background-color: red;        /* 颜色名称 */background-color: transparent; /* 透明 */
}

`background-image` - 背景图片

div {background-image: url("image.jpg"); /* 图片路径 */background-image: linear-gradient(to right, red, yellow); /* 渐变 */background-image: none; /* 无背景图 */
}

`background-repeat` - 背景重复方式

div {background-repeat: repeat;    /* 默认，平铺重复 */background-repeat: repeat-x;  /* 仅水平重复 */background-repeat: repeat-y;  /* 仅垂直重复 */background-repeat: no-repeat; /* 不重复 */background-repeat: space;     /* 均匀分布不裁剪 */background-repeat: round;     /* 缩放适应不空白 */
}

`background-position` - 背景位置

div {background-position: center;  /* 居中 */background-position: left top; /* 左上 */background-position: 50% 50%; /* 百分比定位 */background-position: 20px 40px; /* 像素定位 */
}

`background-size` - 背景尺寸

div {background-size: auto;        /* 原始尺寸 */background-size: cover;       /* 覆盖整个区域 */background-size: contain;     /* 完整显示 */background-size: 50% 80%;    /* 宽度50%，高度80% */background-size: 300px 200px; /* 固定尺寸 */
}

`background-attachment` - 背景附着方式

div {background-attachment: scroll; /* 默认，随内容滚动 */background-attachment: fixed;  /* 固定于视口 */background-attachment: local;  /* 随元素内容滚动 */
}

2. 复合属性

`background` - 简写属性

div {/* 顺序：color image position/size repeat attachment origin clip */background: #ff0000 url("image.jpg") center/cover no-repeat fixed;
}

3. 高级背景属性

`background-origin` - 背景定位区域

div {background-origin: padding-box; /* 相对于内边距框定位 */background-origin: border-box;  /* 相对于边框框定位 */background-origin: content-box; /* 相对于内容框定位 */
}

`background-clip` - 背景绘制区域

div {background-clip: border-box;  /* 延伸到边框 */background-clip: padding-box; /* 延伸到内边距 */background-clip: content-box; /* 仅内容区域 */background-clip: text;        /* 文字镂空效果（需配合text-fill-color） */
}![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/5fc6c8eb80614da09bc8e88d1bffe6e7.png#pic_center)

在这里插入图片描述

`background-blend-mode` - 背景混合模式

div {background-blend-mode: normal;    /* 正常 */background-blend-mode: multiply;  /* 正片叠底 */background-blend-mode: screen;    /* 滤色 */background-blend-mode: overlay;   /* 叠加 */background-blend-mode: darken;    /* 变暗 */background-blend-mode: lighten;   /* 变亮 *//* 共16种混合模式 */
}

4. 多背景图

CSS3 支持为一个元素设置多个背景：

div {background-image: url("image1.png"), url("image2.jpg");background-position: left top, center center;background-repeat: no-repeat, repeat;background-size: 100px 100px, cover;
}

5. 渐变背景

线性渐变 (linear-gradient)

div {background: linear-gradient(to right, red, yellow);background: linear-gradient(45deg, red, orange, yellow);background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}

径向渐变 (radial-gradient)

div {background: radial-gradient(circle, red, yellow);background: radial-gradient(ellipse at center, red 0%, yellow 70%, green 100%);
}

锥形渐变 (conic-gradient)

div {background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);background: conic-gradient(from 45deg, red, orange, yellow);
}

6. 实际应用示例

全屏背景图

.fullscreen-bg {background: url("large-image.jpg") no-repeat center center fixed;background-size: cover;height: 100vh;
}

文字背景效果

.text-bg {background: linear-gradient(to right, red, blue);-webkit-background-clip: text;background-clip: text;color: transparent;
}

图案背景

.pattern-bg {background-color: #e5e5f7;background-image: linear-gradient(#444cf7 1px, transparent 1px),linear-gradient(to right, #444cf7 1px, #e5e5f7 1px);background-size: 20px 20px;
}