免费教程
在使用 background-position 属性来设置背景图像的位置时,默认是以元素左上角的位置来计算的。
Web前端教程
Web前端入门教程:CSS 背景设置(3)
来源:易牛云朗沃
  |  
发布时间:2021-10-08 21:47
  |  
关键词:Web前端开发
  |  
阅读量:

7. background-origin

background-origin 是 CSS3 中新增的属性。在使用 background-position 属性来设置背景图像的位置时,默认是以元素左上角的位置来计算的。您还可以使用 background-origin 属性来设置 background-position 属性相对哪个位置来定位背景图像,background-origin 属性的可选值如下:

Web前端开发

【示例】使用 background-origin 属性设置背景图像相对于元素的边框区域来定位:

Web前端开发

运行结果如下图所示:

Web前端开发

8. background-clip

background-clip 是 CSS3 中新增的属性,通过它可以设置背景图像的显示区域。background-clip 属性的可选值如下:

Web前端开发

【示例】通过 background-clip 属性设置背景图像仅在元素内容区域显示:

Web前端开发

 

运行结果如下图所示:

Web前端开发

9. background

background 是背景属性的简写形式,通过它不仅可以为元素设置某个背景属性,还可以同时设置多个或者所有的背景属性。在设置多个背景属性时并没有固定的顺序,但推荐使用如下顺序进行设置:

background-color || background-image || background-position [/ background-size]? || background-repeat || background-attachment || background-origin || background-clip

在设置多个背景属性时,有以下几点需要注意:

每个属性之间使用空格进行分隔;

如果同时设置 background-position 和 background-size 属性,这两个属性之间需要使用斜线/分隔,并且需要遵循 background-position 属性在前 background-size 属性在后的顺序;

如果同时设置 background-origin 和 background-clip 属性,需要遵循 background-origin 属性在前 background-clip 属性在后的顺序。如果 background-origin 与 background-clip 属性的值相同,则可以只设置一个值。

【示例】通过 background 同时设置多个背景属性:

Web前端开发

运行结果如下图所示:

Web前端开发

background 属性还支持设置多组属性值(比如上面示例中的#ccc url('./bg-image.png') 0px 0px/contain repeat-x border-box就可以看作是一组属性),每组属性值之间使用逗号,分隔。但需要注意的是 background-color 属性不能设置多个,并且只能在最后一组属性值中设置。

如果设置的多组属性中,背景图像之间存在重叠,那么前面设置的背景图像会覆盖在后面的背景图像之上。示例代码如下:

Web前端开发

运行结果如下图所示:

Web前端开发

点击知道更多编程知识

文章来源于网络