CSS3 背景属性

＆白帝＆

于 2024-09-07 08:44:35 发布

阅读量724

点赞数 18

分类专栏： css 文章标签： css3 前端 css

本文链接：https://blog.csdn.net/qq_48763502/article/details/141862210

版权

css 专栏收录该内容

11 篇文章 1 订阅

订阅专栏

1. 设置背景图片（background-image）

使用 background-image 属性设置背景图片。

body {
  background-image: url('your-image.jpg');
}

url(‘your-image.jpg’'): 指定图片的路径。可以是相对路径或绝对路径。
设置多个背景图像
可以在同一元素上设置多个背景图像，它们会按顺序层叠显示。背景图像从第一个到最后一个顺序层叠，前面的图像会覆盖后面的图像。

.multiple-backgrounds {
  background-image: url('image1.jpg'), url('image2.jpg');
}

//设置多张图片，可以给不同的图片设置指定的位置，这样就不会层叠显示
#example1 { 
    background-image: url(img_flwr.gif), url(paper.gif); 
    background-position: right bottom, left top; 
    background-repeat: no-repeat, repeat; 
}

结合其他属性

.styled-background {
  background-image: url('image.jpg');
  background-repeat: no-repeat; /* 背景图像不重复 */
  background-size: cover; /* 背景图像覆盖整个元素 */
  background-position: center; /* 背景图像居中对齐 */
  background-attachment: fixed; /* 背景图像固定在视口 */
}

2. 背景图片的尺寸（background-size）

使用 background-size 属性来控制背景图片的尺寸。常见值包括 cover 和 contain，也可以指定具体的宽度和高度。

常见值

auto: 默认值，保持图像原始尺寸。

.element {
  background-size: auto;
}

cover: 图像会放大到覆盖整个背景区域，但可能会裁剪图像的某些部分以保持比例。

.element {
  background-size: cover;
}

contain: 图像会缩放以适应背景区域，同时保持图像比例。图像可能不会完全覆盖背景区域。

.element {
  background-size: contain;
}

具体尺寸: 你可以指定图像的宽度和高度。例如，100px 50px 设置宽度为 100 像素，高度为 50 像素。

.element {
  background-size: 100px 50px;
}

百分比: 使用百分比可以根据背景区域的尺寸来设置图像的宽度和高度。例如，50% 50% 会将图像宽度和高度设置为背景区域宽度和高度的 50%

.element {
  background-size: 50% 50%;
}

3. 背景图片的位置（background-position）

使用 background-position 属性设置背景图片的位置。常见值包括 center, top left, bottom right 等，也可以使用具体的像素值或百分比。

可以结合使用水平和垂直位置，例如 left center, right bottom, 25% 75% 等。

.element {
  background-position: left top;
}

使用百分比可以指定图像的位置。例如，50% 50% 表示图像的中心对齐于元素的中心。

.element {
  background-position: 50% 50%;
}

使用像素或其他长度单位来精确设置位置。例如，10px 20px 表示距离元素左边缘 10 像素，距离顶部 20 像素。

.element {
  background-position: 10px 20px;
}

4. 背景图片的重复（background-repeat）

使用 background-repeat 属性控制背景图片是否重复。常见值包括 repeat、no-repeat、repeat-x 和 repeat-y。

repeat: 默认值，图像在水平和垂直方向上都重复。

.element {
  background-repeat: repeat;
}

repeat-x: 图像仅在水平方向上重复。

.element {
  background-repeat: repeat-x;
}

repeat-y: 图像仅在垂直方向上重复。

.element {
  background-repeat: repeat-y;
}

no-repeat: 图像不会重复，只显示一次。

.element {
  background-repeat: no-repeat;
}

space: 图像在背景区域内重复，间隔大小取决于背景区域和图像的尺寸。

.element {
  background-repeat: space;
}

round: 图像在背景区域内重复，同时调整图像大小以适应背景区域。

.element {
  background-repeat: round;
}

5. 背景图片的附加属性（background-attachment，background-clip，background-origin）

可以使用以下属性来进一步控制背景图片的显示效果：

background-attachment：控制背景图像是否固定在视口中或随内容滚动。常见值包括 scroll 和 fixed。

scroll: 背景图像会随着页面内容的滚动而滚动。这是默认值。

.element {
  background-attachment: scroll;
}

fixed: 背景图像固定在视口中，不随页面内容的滚动而移动。

.element {
  background-attachment: fixed;
}

local: 背景图像在元素内容区域内滚动，与元素的滚动条一起滚动。这在使用 overflow 属性时特别有用。

.element {
  background-attachment: local;
}

background-clip：用于指定背景图像或背景颜色的绘制区域。它决定了背景内容的显示范围，即背景是否仅绘制在内容区、边框区或内边距区

border-box: 背景图像或背景颜色绘制在元素的边框区域，包括内边距和内容区域。

.element {
  background-clip: border-box;
}

padding-box: 背景图像或背景颜色绘制在元素的内边距区域，但不包括边框区域。

.element {
  background-clip: padding-box;
}

content-box: 背景图像或背景颜色仅绘制在元素的内容区域，不包括内边距或边框区域。

.element {
  background-clip: content-box;
}

background-origin：用于指定背景图像的起始位置，即背景图像如何定位在元素的背景区域。它决定了背景图像相对于元素的内边距、边框或内容区域的位置

border-box: 背景图像相对于元素的边框区域定位。
padding-box: 背景图像相对于元素的内边距区域定位。
content-box: 背景图像相对于元素的内容区域定位。

.element {
  width: 200px;
  height: 200px;
  padding: 20px;
  border: 10px solid black;
  background: url('background.jpg') no-repeat;
  background-origin: padding-box; /* 可以是 border-box、padding-box 或 content-box */
}