如何用CSS实现大背景样式
![大漠](https://res.fequan.com/upload_file/avatar_image/202404/100131_e26031.jpg)
background-repeat
是background
属性之一,对于前端而言,这是再熟悉不过的属性之一了。那么为什么今天要来聊这个background-repeat
属性呢?在CSS2.1中,众所周知,background-repeat
属性具有四个常见的值repeat
、repeat-x
、repeat-y
和no-repeat
。而今天要说不是这四个属性值,在CSS Backgrounds and Borders Module Level 3中,给background-repeat
新增加了两个属性值round
和space
。在接下的中,要讨论的就是新增的这两个属性值怎么使用,他们具有什么特性。
背景(background
)是 CSS 中最常见也是最基础的一个属性,它自 CSS 1.0 版本就开始有了。最早的时候我们可以通过 background
给一个元素盒子的背景层设置背景颜色(background-color
)、背景图像(background-image
)。如果是背景图像的话,还可以调整背景图像的位置(background-position
)、设置背景图像的平铺方式(background-repeat
)以及背景图像在背景层的依附模式(background-attachment
)。不过,随着 CSS 技术不断向前发展,CSS 为开发者提供了一些新特性用来控制背景图像,比如背景图像的大小(background-size
)、背景图像的剪切(background-clip
)、背景图像的定位区域(background-origin
)以及给同一个元素盒子设置多个背景。除此之外,CSS 还为 background
的一些老属性新增了功能,比如 background-position
可以指定四个值,通过方向设置背景图像的位置,background-repeat
多了几种不同的平铺方式。另外,CSS 还可以使用 background-blend-mode
属性来设置不同的混合模式,从而改变背景图像的效果。
在第一部分主要和大家一起探讨了 CSS background
属性中的background-image
、background-repeat
、background-attachment
等属性。今天接着和大家一起来探讨其另外三个子属性,即 background-position
、background-clip
和 background-origin
。感兴趣的同学请继续往下阅读!
前面已经花了两篇的篇幅(《CSS背景:Part1和Part2》)介绍完了除background-size
之外的所有background
子属性的特性以及使用。众所周之,在Web中对于<img>
引入的图片,我们可以显式使用width
、height
、aspect-ratio
或object-fit
等属性来调整图片尺寸,但对于背景图片,我们只能使用background-size
来进行调整。那么background-size
是如何决定背景图片尺寸的计算呢?如果你感兴趣的话,这篇文章可以告诉你很多不为人知的答案。