重学前端010 --- 响应式网页设计 中级CSS
文章目录
- CSS 中关于背景相关的属性
- 其他
- innerHTML
- transform
- z-index
CSS 中关于背景相关的属性
在 HTML 中，背景相关的 CSS 属性主要用于控制元素的背景样式，包括颜色、图片、渐变、位置、大小等。以下是常见的背景相关 CSS 属性：
| 属性 | 作用 | 示例 | 默认值 | 值范围 |
|---|---|---|---|---|
| background-color | 背景颜色 | #ff0000; /* 红色 / rgba(255, 0, 0, 0.5); / 半透明红色 */ | - | |
| background-image | 背景图片（支持 URL、渐变） | url(“img.jpg”) | - | linear-gradient(to right 85%, red, blue 100%)可以设置 to right/to bottom |
| background-repeat | 背景图片是否重复 | no-repeat | - | no-repeat/ repeat-x/ repeat-y |
| background-position | 设置背景图片的起始位置（支持关键词、百分比、像素） | center | - | center 20px 50%; /* 水平 20px，垂直 50% */ |
| background-size | 背景图片尺寸 | cover | - | cover; /* 覆盖整个元素（可能裁剪） / contain; / 完整显示（可能留白） */ |
| background-attachment | 控制背景图片是否随页面滚动 | fixed | - | fixed scroll |
| background-clip | 控制背景（颜色/图片）的绘制区域 | content-box | - | border-box; /* 延伸到边框（默认） / padding-box; / 仅延伸到内边距 / content-box; / 仅内容区域 */ |
| background-origin | 背景图片的定位基准 | padding-box | padding-box border-box; /* 从边框开始计算 / padding-box; / 默认，从内边距开始 / content-box; / 从内容区域开始 */ | |
| background（简写） | 合并属性 | color url() no-repeat center/cover | - |
其他
innerHTML
innerHTML 属性设置或返回元素内的 HTML 内容。
transform
transform 属性允许你在不改变布局或影响周围元素的情况下修改元素的形状、位置和大小。 它具有 translate()、rotate()、scale()、skew() 和 matrix() 等功能。
z-index
z-index 是一个属性，可以用来定义重叠的 HTML 元素的顺序。 拥有较高 z-index 的任何元素总会位于拥有较低 z-index 的元素之上。