【CSS】CSS 背景设置 ⑦ ( 背景简写 )

韩曙亮

发布于 2023-03-30 19:23:13

2.7K0

发布于 2023-03-30 19:23:13

文章被收录于专栏：韩曙亮的移动开发专栏

文章目录

一、背景简写

1、语法说明

使用 CSS 样式设置盒子背景时 , 需要设置多个 CSS 样式 , 设置背景图片 , 平铺模式 , 定位方式 , 附着方式等 , 下面是一个完整的图片背景设置的代码 , 代码很繁琐 ;

		body {
			/* 设置一个足够高的高度, 让页面滚动起来 */
			height: 2000px;
			
			/* 设置背景图片 */
			background-image: url(images/bg.jpg);
			
			/* 设置图片背景平铺模式 */
			background-repeat: no-repeat;
			
			/* 超大背景图片定位 */
			background-position: center top;
			
			/* 背景固定 */
			/*background-attachment: fixed;*/
			
			/* 背景滚动 */
			background-attachment: scroll;
		}

类似于文本样式的字样样式综合写法方式 ,

选择器 { font:font-style font-weight font-size/line-height font-family;}

CSS 背景也可以进行进行简写 , 语法格式如下 :

background: pink url(image.jpg) no-repeat  scroll center top ;

background 属性值的各种背景样式属性的顺序没有进行强制定义 , 这里建议按照如下顺序进行编写 :

背景颜色
背景图片
背景平铺
背景滚动
背景位置

2、代码示例

核心代码 :

			/* 背景简写方式 */
			background: transparent url(images/bg.jpg) no-repeat scroll center top ;

完整代码示例 :

<!DOCTYPE html> 
<html lang="en">
<head>    
	<meta charset="UTF-8" /> 
    <title>背景简写</title>
	<base target="_blank"/>
	<style>
		body {
			/* 设置一个足够高的高度, 让页面滚动起来 */
			height: 2000px;
			
			/* 设置背景图片 */
			/*background-image: url(images/bg.jpg);*/
			
			/* 设置图片背景平铺模式 */
			/*background-repeat: no-repeat;*/
			
			/* 超大背景图片定位 */
			/*background-position: center top;*/
			
			/* 背景固定 */
			/*background-attachment: fixed;*/
			
			/* 背景滚动 */
			/*background-attachment: scroll;*/
			
			/* 背景简写方式 */
			background: transparent url(images/bg.jpg) no-repeat scroll center top ;
		}
		p {
			font-size: 50px;
			color: black;
		}
	</style>
</head>
<body>
<body>
	<p>背景简写测试</p>
	<p>背景简写测试</p>
	<p>背景简写测试</p>
</body>
</html>

显示效果 :