css相关记录-background

CSS背景属性详解

最新推荐文章于 2024-03-20 15:25:47 发布

原创最新推荐文章于 2024-03-20 15:25:47 发布 · 511 阅读

0 ·

CC 4.0 BY-SA版权

css 专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了CSS中的背景属性，包括background-color、background-image等，并解释了background-clip与background-origin的作用区别。

background:

background: [background-color] [background-image] [background-repeat]
            [background-attachment] [background-position] / [ background-size]
            [background-origin] [background-clip];

默认值：inherit(no)

值	描述	CSS	Default
background-color	规定要使用的背景颜色。	1	transparent
background-image	规定要使用的背景图像。	1	none
background-repeat	规定如何重复背景图像。	1	repeat
background-attachment	规定背景图像是否固定或者随着页面的其余部分滚动。	1	scroll
background-position	规定背景图像的位置。	1	0% 0%
background-size	规定背景图片的尺寸。	3	auto
background-origin	规定背景图片的定位区域。	3	padding-box
background-clip	规定背景的绘制区域。	3	border-box

eg:

.example {
  background: aquamarine url(img.png)
              no-repeat
              scroll
              center center / 50%
              content-box content-box;
}

background-origin：绘制区域，表示背景图片从哪里开始绘制；
background-clip：显示区域，从哪里开始显示origin绘制的图片（如果显示区域小于绘制区域进行裁剪）
background-position：表示绘制区域相对于origin的偏移

参考：
css3属性中background-clip与background-origin的用法释疑