文章目录
- 一、背景简写
- 1、语法说明
- 2、代码示例
一、背景简写
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>
显示效果 :
滚动后效果 :
