background连写

background连写是指在CSS中使用多个background属性值来一起定义一个元素的背景样式。可以通过在background属性值中使用逗号分隔不同的背景值来实现连写。每个背景值可以包括background-image、background-position、background-size、background-repeat、background-origin和background-clip等属性。

例如，通过以下代码可以实现background连写：

div {
  background: url('image1.png') center / cover no-repeat, linear-gradient(to bottom, #f00, #000);
}

上述代码中，使用了两个背景值：第一个背景值是一个图片，居中显示并填充整个元素，不重复；第二个背景值是一个线性渐变，从上到下渐变的颜色为红色到黑色。

需要注意的是，在连写中每个背景值的顺序是按照覆盖顺序从前到后的。也就是说，排在前面的背景值会覆盖在后面的背景值之上。

通过使用background连写，可以实现更复杂的背景样式效果，增加页面的美观性和吸引力。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* [CSS background 简写连写](https://blog.csdn.net/gcyaozuodashen/article/details/131411923)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *3* [css background一行代码实现背景图片自适应视口并且不拉伸](https://blog.csdn.net/m0_43599959/article/details/114181763)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]