css背景属性用法详解

最新推荐文章于 2022-11-03 12:06:54 发布

原创最新推荐文章于 2022-11-03 12:06:54 发布 · 379 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css背景属性用法详解

html+css 专栏收录该内容

29 篇文章

订阅专栏

本文详细介绍了CSS3中新增的背景属性，包括background-origin、background-clip、background-attachment等，以及如何综合使用这些属性来实现复杂的背景效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

css3背景

新增的属性：

background-origin（指定背景图像的位置区域）padding-box border-box content-box
background-clip（规定背景的绘制区域）border-box padding-box content-box
background-attachment（设置背景图像是否固定或者随着页面的其余部分滚动）scroll fixed inherit
background-size: （属性定义了背景图的尺寸） length | percentage | cover | contain;
background-blend-mode（属性定义了背景层的混合模式（图片与颜色）

.d1 {
/* 同时设置两张背景图 */
width: 200px;
height: 200px;
background: linear-gradient(red, pink);                            /* 渐变色*/
background-image: url('1.png'), url('2.jpg');                    /* 图片路径 */
background-position: right bottom, left top;                  /* 图片位置 */
background-repeat: no-repeat, no-repeat;                    /* 是否重复 */
background-size: 200px 100px, 200px 100px;              /* 图片尺寸  ength  %比  cover contain */
background-origin: content-box, content-box;           /* 指定背景图像的位置区域 padding-box border-box content-box 新增属性*/
background-clip: border-box, border-box;                /* 规定背景的绘制区域 border-box|padding-box|content-box */
background-attachment: fixed, fixed;                        /* background-attachment设置背景图像是否固定或者随着页面的其余部分滚动。scroll fixed inherit */
background-blend-mode: normal;                           /* background-blend-mode 属性定义了背景层的混合模式（图片与颜色）。 */
}

综合写法：

.div2{
width: 200px;
height: 200px;
background: url(1.png) right bottom no-repeat, url(2.jpg) left top no-repeat;
}