第十五讲：background-属性

background-color属性

css2.1中，颜色的表示方法一共有三种：单词、rgb表示法、十六进制表示法。十六进制可以简化为3位，所有#aabbcc的形式，能够简化为#abc;

【案例】

CSS

*{

margin: 0;

padding: 0;

}

div{

width: 200px;

height: 100px;

border:1px solid #ccc;

}

.box1{

/*单词表示法*/

background-color: skyblue;

}

.box2{

/*rgb表示法*/

background-color: #87ceeb;

}

.box3{

/*十六进制表示法*/

background-color: rgb(135,206,235);

}

HTML

box1

box2

box3

【运行结果】

background-image属性

背景图会被平铺满且padding的区域有背景图

【案例】

CSS

*{

margin: 0;

padding: 0;

}

div{

width: 500px;

height: 200px;

padding:20px;

border: 1px solid #ccc;

background-image: url(img/bg.jpg);

}

HTML

前端基地前端基地前端基地前端基地前端基地

【运行结果】

background-repeat属性

background-repeat 属性设置是否及如何重复背景图像。默认地，背景图像在水平和垂直方向上重复。

【案例】

CSS

*{

margin: 0;

padding: 0;

}

div{

width: 500px;

height: 200px;

padding:20px;

border: 1px solid #ccc;

background-image: url(img/bg.jpg);

background-repeat: repeat-x;

}

HTML

前端基地前端基地前端基地前端基地前端基地

【运行结果】

background-position属性

【用单词描述位置】

语法：background-position: 描述左右 描述上下;

【用坐标描述位置】

通过水平垂直位置坐标来描述位置：第一个值是水平位置，第二个值是垂直位置。左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。

【案例】

CSS

*{

margin: 0;

padding: 0;

}

div{

width: 500px;

height: 200px;

padding:20px;

border: 1px solid #ccc;

background-image: url(img/bg.jpg);

background-repeat: no-repeat;

background-position: -50px 0;

}

HTML

前端基地前端基地前端基地前端基地前端基地

【运行结果】

【应用】

background-position属性主要应用：css精灵（英语css sprite），也叫做“css雪碧”技术,优点是减少http请求。

background-attachment属性

background-attachment:fixed;背景就会被固定住，不会被滚动条滚走。

【案例】

CSS

*{

margin: 0;

padding: 0;

}

body{

background-image: url(img/bg.jpg);

background-attachment: fixed;

}

div{

height: 1500px;

color:#fff;

}

HTML

前端基地前端基地前端基地前端基地前端基地

【运行结果】

background-综合属性

background:red url(1.jpg) no-repeat 100px 100px fixed;

等价于：

background-color:red;

background-image:url(1.jpg);

background-repeat:no-repeat;

background-position:100px100px;

background-attachment:fixed;

打赏规则

为了避免对于打赏模式产生误解，说明一下几点内容：

1.打赏纯粹自愿，金额不限；

2.打赏不能作为解答前端技术疑问的理由；

3.打赏不能作为催促更新文章的理由；

4.打赏不能帮你做毕业设计或论文；

5.打赏不能帮你做工作中的项目；

6.总之：打赏就是这不能那不能，只是单纯打赏而已。

声明

* 公众号（QD前端基地）内转载文章全部用于学习交流，如有涉及版权问题请与我联系，我会删除相关文章。给您带来不便敬请谅解，谢谢！

* 公众号（QD前端基地）内原创文章如内容不符合事实或涉及其他方面的问题，请及时通知本人进行修改或删除。版权作品未经授权严禁盗图转载，如有雷同纯属巧合。

* 转载公众号（QD前端基地）内的文章，请先与本文作者联系经过同意后方可转载，并注明相关出处和作者信息且留下原文链接地址，这是对文章作者的尊重，也是对知识的尊重。欢迎同行网站转载本站文章。

【投诉请联系微信】：xinxiha888

前端基地

「前端基地」最专业的Web前端开发在线学习公众号，提供Web前端开发教程，是分享Web前端开发技术和前端资源的在线学习交流公众号。

关注一下，也许你就成为牛逼的前端高手呢～

微信公众号：qdbase