CSSCSS 背景设置 ⑦ ( 背景简写 )
Posted 韩曙亮
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSSCSS 背景设置 ⑦ ( 背景简写 )相关的知识，希望对你有一定的参考价值。
文章目录
一、背景简写
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>
显示效果 :
滚动后效果 :
以上是关于CSSCSS 背景设置 ⑦ ( 背景简写 )的主要内容，如果未能解决你的问题，请参考以下文章
CSSCSS 背景设置 ② ( 背景位置 | 背景位置-方位值设置 )
CSSCSS 背景设置 ① ( 背景颜色 | 背景图片 | 背景平铺 )
CSSCSS 背景设置 ⑧ ( 背景设置案例 | 导航栏按钮 )
CSSCSS 背景设置 ⑥ ( 背景附着 | background-attachment )
CSSCSS 背景设置 ③ ( 背景位置-长度值设置 | 背景位置-长度值方位值同时设置 )
CSSCSS 背景设置 ④ ( 超大背景图片设置 | 背景图片定位设置 background-position: center top； )